🐛 Revisit placeholder loading logic to handle different types of embeddables

Author: dej611

src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx

@@ -98,7 +98,12 @@ test('Clone adds a new embeddable', async () => {
   );
   expect(newPanelId).toBeDefined();
   const newPanel = container.getInput().panels[newPanelId!];
-  expect(newPanel.type).toEqual(embeddable.type);
+  expect(newPanel.type).toEqual('placeholder');
+  // let the placeholder load
+  await dashboard.untilEmbeddableLoaded(newPanelId!);
+  // now wait for the full embeddable to replace it
+  const loadedPanel = await dashboard.untilEmbeddableLoaded(newPanelId!);
+  expect(loadedPanel.type).toEqual(embeddable.type);
 });
 
 test('Clones an embeddable without a saved object ID', async () => {

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -154,15 +154,21 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       placementMethod,
       placementArgs
     );
+
     this.updateInput({
       panels: {
         ...this.input.panels,
         [placeholderPanelState.explicitInput.id]: placeholderPanelState,
       },
     });
-    newStateComplete.then((newPanelState: Partial<PanelState>) =>
-      this.replacePanel(placeholderPanelState, newPanelState)
-    );
+
+    // wait until the placeholder is ready, then replace it with new panel
+    // this is useful as sometimes panels can load faster than the placeholder one (i.e. by value embeddables)
+    this.untilEmbeddableLoaded(originalPanelState.explicitInput.id)
+      .then(() => newStateComplete)
+      .then((newPanelState: Partial<PanelState>) =>
+        this.replacePanel(placeholderPanelState, newPanelState)
+      );
   }
 
   public replacePanel(

src/plugins/embeddable/public/lib/containers/container.ts

@@ -335,6 +335,12 @@ export abstract class Container<
     return embeddable;
   }
 
+  private panelHasChanged(currentPanel: PanelState, prevPanel: PanelState) {
+    if (currentPanel.type !== prevPanel.type) {
+      return true;
+    }
+  }
+
   private maybeUpdateChildren(
     currentPanels: TContainerInput['panels'],
     prevPanels: TContainerInput['panels']
@@ -349,7 +355,7 @@ export abstract class Container<
       }
       // In case of type change, remove and add a panel with the same id
       if (currentPanels[id] && prevPanels[id]) {
-        if (currentPanels[id].type !== prevPanels[id].type) {
+        if (this.panelHasChanged(currentPanels[id], prevPanels[id])) {
           this.onPanelRemoved(id);
           this.onPanelAdded(currentPanels[id]);
         }