[8.18] [dashboard] fixs controls cause double fetch (#237169)

src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts

@@ -12,7 +12,7 @@ import { ControlGroupApi, ControlGroupSerializedState } from '@kbn/controls-plug
 import { EmbeddablePackageState } from '@kbn/embeddable-plugin/public';
 import { StateComparators } from '@kbn/presentation-publishing';
 import { omit } from 'lodash';
-import { BehaviorSubject, debounceTime, merge } from 'rxjs';
+import { BehaviorSubject, debounceTime, merge, first, skipWhile, switchMap } from 'rxjs';
 import { v4 } from 'uuid';
 import {
   getReferencesForControls,
@@ -271,6 +271,21 @@ export function getDashboardApi({
       },
       setControlGroupApi: (controlGroupApi: ControlGroupApi) =>
         controlGroupApi$.next(controlGroupApi),
+      untilControlsInitialized: async () => {
+        return new Promise((resolve) => {
+          controlGroupApi$
+            .pipe(
+              skipWhile((controlGroupApi) => !controlGroupApi),
+              switchMap(async (controlGroupApi) => {
+                await controlGroupApi?.untilInitialized();
+              }),
+              first()
+            )
+            .subscribe(() => {
+              resolve();
+            });
+        });
+      },
     } as DashboardInternalApi,
     cleanup: () => {
       dataLoadingManager.cleanup();

src/platform/plugins/shared/dashboard/public/dashboard_api/types.ts

@@ -189,4 +189,5 @@ export interface DashboardInternalApi {
   getSerializedStateForControlGroup: () => SerializedPanelState<ControlGroupSerializedState>;
   registerChildApi: (api: DefaultEmbeddableApi) => void;
   setControlGroupApi: (controlGroupApi: ControlGroupApi) => void;
+  untilControlsInitialized: () => Promise<void>;
 }

src/platform/plugins/shared/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx

@@ -79,23 +79,18 @@ export const DashboardViewport = ({
     };
   }, [controlGroupApi]);
 
-  // Bug in main where panels are loaded before control filters are ready
-  // Want to migrate to react embeddable controls with same behavior
-  // TODO - do not load panels until control filters are ready
-  /*
-  const [dashboardInitialized, setDashboardInitialized] = useState(false);
+  const [controlsReady, setControlsReady] = useState(false);
   useEffect(() => {
     let ignore = false;
-    dashboard.untilContainerInitialized().then(() => {
+    dashboardInternalApi.untilControlsInitialized().then(() => {
       if (!ignore) {
-        setDashboardInitialized(true);
+        setControlsReady(true);
       }
     });
     return () => {
       ignore = true;
     };
-  }, [dashboard]);
-  */
+  }, [dashboardInternalApi]);
 
   return (
     <div
@@ -140,7 +135,9 @@ export const DashboardViewport = ({
         data-description={description}
         data-shared-items-count={panelCount}
       >
-        <DashboardGrid dashboardContainerRef={dashboardContainerRef} />
+        {viewMode === 'print' || controlsReady ? (
+          <DashboardGrid dashboardContainerRef={dashboardContainerRef} />
+        ) : null}
       </div>
     </div>
   );