fix(packages/core): MMR rendering is glitchy

we update the bottom stripe, then fetch the content for the first tab, then update the Presentation (e.g. from Slim to Normal). since the middle one is asynchronous, this introduces a glitchy UI effect

Fixes #3589

Author: starpit

packages/core/src/models/mmr/show.ts

@@ -140,9 +140,12 @@ export async function show<T extends MetadataBearing>(tab: Tab, mmr: MultiModalR
   // const buttons = mmr.buttons ? formatButtons(tab, mmr, mmr.buttons) : ([] as SidecarMode[])
   const ourModesWithButtons = modes.concat(mmr.buttons || [])
 
+  // first, do a "modelOnly" pass, to get the full list of modes
+  // see https://github.com/IBM/kui/issues/3589
   const modesWithButtons = addModeButtons(tab, ourModesWithButtons, mmr, {
     preserveBackButton: true,
-    show: mmr.defaultMode
+    show: mmr.defaultMode,
+    modelOnly: true
   })
 
   const defaultMode =
@@ -153,7 +156,15 @@ export async function show<T extends MetadataBearing>(tab: Tab, mmr: MultiModalR
     throw new Error('default mode is a button')
   }
 
-  const content = hasContent(defaultMode) ? defaultMode : undefined
+  const content = hasContent(defaultMode) ? await renderContent(tab, mmr, defaultMode) : undefined
+
+  // now that we've rendered the initial/default content, do a pass
+  // over the modes and add them to the UI; see
+  // https://github.com/IBM/kui/issues/3589
+  addModeButtons(tab, ourModesWithButtons, mmr, {
+    preserveBackButton: true,
+    show: mmr.defaultMode
+  })
 
   if (content) {
     const custom: CustomSpec = Object.assign(
@@ -165,7 +176,7 @@ export async function show<T extends MetadataBearing>(tab: Tab, mmr: MultiModalR
         prettyName: mmr.prettyName,
         nameHash: mmr.nameHash
       },
-      await renderContent(tab, mmr, content)
+      content
     )
 
     const { showCustom } = await import('../../webapp/views/sidecar')

packages/core/src/webapp/bottom-stripe.ts

@@ -48,6 +48,9 @@ export function isSidecarMode(entity: string | HTMLElement | Table | SidecarMode
 interface BottomStripOptions {
   show?: string
   preserveBackButton?: boolean
+
+  /** only generate model, do not update view? */
+  modelOnly?: boolean
 }
 
 export const rawCSS = {
@@ -351,14 +354,18 @@ export const addModeButtons = (
     addRelevantModes(tab, modesUnsorted, command, entity)
   }
 
-  if (options.show && modesUnsorted.find(_ => _.mode === options.show)) {
+  if (options && options.show && modesUnsorted.find(_ => _.mode === options.show)) {
     modesUnsorted = modesUnsorted.map(_ => Object.assign({}, _))
 
     modesUnsorted.filter(_ => _.defaultMode && _.mode !== options.show).forEach(_ => (_.defaultMode = false))
 
     modesUnsorted.find(_ => _.mode === options.show).defaultMode = true
   }
 
+  if (options && options.modelOnly) {
+    return modesUnsorted
+  }
+
   // obey the `order` constraints of the modes
   const modes = modesUnsorted.sort((a, b) => {
     return (a.order || 0) - (b.order || 0)

packages/test/src/api/mmr.ts

@@ -233,7 +233,7 @@ export class TestMMR {
                 await this.app.client.waitForExist(Selectors.SIDECAR_MODE_BUTTON_SELECTED(expectMode.mode))
               }
             } catch (err) {
-              return Common.oops(this)(err)
+              return Common.oops(this, true)(err)
             }
           })
 
@@ -244,7 +244,7 @@ export class TestMMR {
                   await SidecarExpect.textPlainContent(expectMode.content)(this.app)
                 }
               } catch (err) {
-                return Common.oops(this)(err)
+                return Common.oops(this, true)(err)
               }
             })
           } else if (expectMode.contentType === 'table') {
@@ -255,7 +255,7 @@ export class TestMMR {
                   assert.strictEqual(rows.value.length, expectMode.nRows)
                 }
               } catch (err) {
-                return Common.oops(this)(err)
+                return Common.oops(this, true)(err)
               }
             })
             it(`should show ${expectMode.nCells} table cells in the ${expectMode.mode} tab`, async () => {
@@ -265,7 +265,7 @@ export class TestMMR {
                   assert.strictEqual(cells.value.length, expectMode.nCells)
                 }
               } catch (err) {
-                return Common.oops(this)(err)
+                return Common.oops(this, true)(err)
               }
             })
           } else if (expectMode.contentType === 'yaml') {
@@ -276,7 +276,7 @@ export class TestMMR {
                     await SidecarExpect.yaml(expectMode.content)(this.app)
                   }
                 } catch (err) {
-                  return Common.oops(this)(err)
+                  return Common.oops(this, true)(err)
                 }
               })
             } else {
@@ -286,7 +286,7 @@ export class TestMMR {
                     await SidecarExpect.textPlainContent(expectMode.content)(this.app)
                   }
                 } catch (err) {
-                  return Common.oops(this)(err)
+                  return Common.oops(this, true)(err)
                 }
               })
             }

packages/test/src/api/util.ts

@@ -195,8 +195,12 @@ export const waitForXtermInput = (app: Application, N: number) => {
 }
 
 export const expectText = (app: Application, expectedText: string) => async (selector: string) => {
+  let idx = 0
   await app.client.waitUntil(async () => {
     const actualText = await app.client.getText(selector)
+    if (++idx > 5) {
+      console.error(`still waiting for text; actualText=${actualText} expectedText=${expectedText}`)
+    }
     return actualText === expectedText
   })
   return app