lazy load panels when systemDynamicRowSizeVar is used

package.json

@@ -296,8 +296,8 @@
     "@grafana/plugin-ui": "^0.11.1",
     "@grafana/prometheus": "workspace:*",
     "@grafana/runtime": "workspace:*",
-    "@grafana/scenes": "6.49.0",
-    "@grafana/scenes-react": "6.49.0",
+    "@grafana/scenes": "6.49.1--canary.1313.20102090431.0",
+    "@grafana/scenes-react": "6.49.1--canary.1313.20102090431.0",
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",

public/app/features/dashboard-scene/scene/DashboardScene.tsx

@@ -89,7 +89,6 @@ import { DashboardGridItem } from './layout-default/DashboardGridItem';
 import { DefaultGridLayoutManager } from './layout-default/DefaultGridLayoutManager';
 import { addNewRowTo } from './layouts-shared/addNew';
 import { clearClipboard } from './layouts-shared/paste';
-import { getIsLazy } from './layouts-shared/utils';
 import { DashboardLayoutManager } from './types/DashboardLayoutManager';
 import { LayoutParent } from './types/LayoutParent';
 
@@ -200,7 +199,7 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> impleme
       meta: {},
       editable: true,
       $timeRange: state.$timeRange ?? new SceneTimeRange({}),
-      body: state.body ?? DefaultGridLayoutManager.fromVizPanels([], getIsLazy(state.preload)),
+      body: state.body ?? DefaultGridLayoutManager.fromVizPanels([]),
       links: state.links ?? [],
       ...state,
       editPane: new DashboardEditPane(),

public/app/features/dashboard-scene/scene/SoloPanelContext.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 
 import { Trans } from '@grafana/i18n';
-import { VizPanel } from '@grafana/scenes';
+import { LazyLoader, VizPanel } from '@grafana/scenes';
 import { Box, Spinner } from '@grafana/ui';
 
 import { DashboardScene } from './DashboardScene';
@@ -51,11 +51,23 @@ export function useSoloPanelContext() {
   return useContext(SoloPanelContext);
 }
 
-export function renderMatchingSoloPanels(soloPanelContext: SoloPanelContextValue, panels: VizPanel[]) {
+export function renderMatchingSoloPanels(
+  soloPanelContext: SoloPanelContextValue,
+  panels: VizPanel[],
+  isLazy?: boolean
+) {
   const matches: React.ReactNode[] = [];
   for (const panel of panels) {
     if (soloPanelContext.matches(panel)) {
-      matches.push(<panel.Component model={panel} key={panel.state.key} />);
+      if (isLazy) {
+        matches.push(
+          <LazyLoader key={panel.state.key!}>
+            <panel.Component model={panel} />
+          </LazyLoader>
+        );
+      } else {
+        matches.push(<panel.Component model={panel} key={panel.state.key} />);
+      }
     }
   }
 

public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemRenderer.tsx

@@ -89,7 +89,7 @@ export function AutoGridItemRenderer({ model }: SceneComponentProps<AutoGridItem
   );
 
   if (soloPanelContext) {
-    return renderMatchingSoloPanels(soloPanelContext, [body, ...repeatedPanels]);
+    return renderMatchingSoloPanels(soloPanelContext, [body, ...repeatedPanels], isLazy);
   }
 
   const isDragging = !!draggingKey;

public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemRenderer.tsx

@@ -2,16 +2,20 @@ import { css } from '@emotion/css';
 import { useMemo } from 'react';
 
 import { config } from '@grafana/runtime';
-import { SceneComponentProps } from '@grafana/scenes';
+import { LazyLoader, SceneComponentProps, VizPanel } from '@grafana/scenes';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
 
+import { useDashboardState } from '../../utils/utils';
 import { renderMatchingSoloPanels, useSoloPanelContext } from '../SoloPanelContext';
+import { getIsLazy } from '../layouts-shared/utils';
 
 import { DashboardGridItem, RepeatDirection } from './DashboardGridItem';
 
 export function DashboardGridItemRenderer({ model }: SceneComponentProps<DashboardGridItem>) {
   const { repeatedPanels = [], itemHeight, variableName, body } = model.useState();
   const soloPanelContext = useSoloPanelContext();
+  const { preload } = useDashboardState(model);
+  const isLazy = useMemo(() => getIsLazy(preload), [preload]);
   const layoutStyle = useLayoutStyle(
     model.getRepeatDirection(),
     model.getChildCount(),
@@ -19,27 +23,35 @@ export function DashboardGridItemRenderer({ model }: SceneComponentProps<Dashboa
     itemHeight ?? 10
   );
 
+  function LazyPanelWrapper({ item }: { item: VizPanel }) {
+    return isLazy ? (
+      <LazyLoader key={item.state.key!} className={panelWrapper}>
+        <item.Component model={item} />
+      </LazyLoader>
+    ) : (
+      <div className={panelWrapper}>
+        <item.Component model={item} />
+      </div>
+    );
+  }
+
   if (soloPanelContext) {
-    return renderMatchingSoloPanels(soloPanelContext, [body, ...repeatedPanels]);
+    return renderMatchingSoloPanels(soloPanelContext, [body, ...repeatedPanels], isLazy);
   }
 
   if (!variableName) {
     return (
       <div className={panelWrapper} ref={model.containerRef}>
-        <body.Component model={body} key={body.state.key} />
+        <LazyPanelWrapper item={body} key={body.state.key!} />
       </div>
     );
   }
 
   return (
     <div className={layoutStyle} ref={model.containerRef}>
-      <div className={panelWrapper} key={body.state.key}>
-        <body.Component model={body} key={body.state.key} />
-      </div>
+      <LazyPanelWrapper item={body} key={body.state.key!} />
       {repeatedPanels.map((panel) => (
-        <div className={panelWrapper} key={panel.state.key}>
-          <panel.Component model={panel} key={panel.state.key} />
-        </div>
+        <LazyPanelWrapper item={panel} key={panel.state.key!} />
       ))}
     </div>
   );

public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx

@@ -47,7 +47,6 @@ import { AutoGridItem } from '../layout-auto-grid/AutoGridItem';
 import { CanvasGridAddActions } from '../layouts-shared/CanvasGridAddActions';
 import { clearClipboard, getDashboardGridItemFromClipboard } from '../layouts-shared/paste';
 import { dashboardCanvasAddButtonHoverStyles } from '../layouts-shared/styles';
-import { getIsLazy } from '../layouts-shared/utils';
 import { DashboardLayoutGrid } from '../types/DashboardLayoutGrid';
 import { DashboardLayoutManager } from '../types/DashboardLayoutManager';
 import { LayoutRegistryItem } from '../types/LayoutRegistryItem';
@@ -565,11 +564,10 @@ export class DefaultGridLayoutManager
 
   public static createFromLayout(currentLayout: DashboardLayoutManager): DefaultGridLayoutManager {
     const panels = currentLayout.getVizPanels();
-    const isLazy = getIsLazy(getDashboardSceneFor(currentLayout).state.preload)!;
-    return DefaultGridLayoutManager.fromVizPanels(panels, isLazy);
+    return DefaultGridLayoutManager.fromVizPanels(panels);
   }
 
-  public static fromVizPanels(panels: VizPanel[] = [], isLazy?: boolean | undefined): DefaultGridLayoutManager {
+  public static fromVizPanels(panels: VizPanel[] = []): DefaultGridLayoutManager {
     const children: DashboardGridItem[] = [];
     const panelHeight = 10;
     const panelWidth = GRID_COLUMN_COUNT / 3;
@@ -607,7 +605,6 @@ export class DefaultGridLayoutManager
         children: children,
         isDraggable: true,
         isResizable: true,
-        isLazy,
       }),
     });
   }
@@ -615,8 +612,7 @@ export class DefaultGridLayoutManager
   public static fromGridItems(
     gridItems: SceneGridItemLike[],
     isDraggable?: boolean,
-    isResizable?: boolean,
-    isLazy?: boolean | undefined
+    isResizable?: boolean
   ): DefaultGridLayoutManager {
     const children = gridItems.reduce<SceneGridItemLike[]>((acc, gridItem) => {
       gridItem.clearParent();
@@ -630,7 +626,6 @@ export class DefaultGridLayoutManager
         children,
         isDraggable,
         isResizable,
-        isLazy,
       }),
     });
   }

public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx

@@ -358,8 +358,7 @@ export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> i
             layout: DefaultGridLayoutManager.fromGridItems(
               rowConfig.children,
               rowConfig.isDraggable ?? layout.state.grid.state.isDraggable,
-              rowConfig.isResizable ?? layout.state.grid.state.isResizable,
-              layout.state.grid.state.isLazy
+              rowConfig.isResizable ?? layout.state.grid.state.isResizable
             ),
           })
       );

yarn.lock

@@ -3603,11 +3603,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes-react@npm:6.49.0":
-  version: 6.49.0
-  resolution: "@grafana/scenes-react@npm:6.49.0"
+"@grafana/scenes-react@npm:6.49.1--canary.1313.20102090431.0":
+  version: 6.49.1--canary.1313.20102090431.0
+  resolution: "@grafana/scenes-react@npm:6.49.1--canary.1313.20102090431.0"
   dependencies:
-    "@grafana/scenes": "npm:6.49.0"
+    "@grafana/scenes": "npm:6.49.1--canary.1313.20102090431.0"
     lru-cache: "npm:^10.2.2"
     react-use: "npm:^17.4.0"
   peerDependencies:
@@ -3619,7 +3619,7 @@ __metadata:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-router-dom: ^6.28.0
-  checksum: 10/0f9ba2ccaf2c8a703f3c4867320852c07f640aea85491e6c1a35d7fd25b48e69740f7782b52280ab4d423a6e87659de41cf66904acc865c9ea1f934ded6c7e64
+  checksum: 10/275239e8f2458bebc70e895f6175a33b6199441d05b83caf2d2969fc772a12e19cdddc59b206b15f0c67bc1d250f817cf5075eb33eed0869d96076e2c1f9a730
   languageName: node
   linkType: hard
 
@@ -3649,9 +3649,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/scenes@npm:6.49.0":
-  version: 6.49.0
-  resolution: "@grafana/scenes@npm:6.49.0"
+"@grafana/scenes@npm:6.49.1--canary.1313.20102090431.0":
+  version: 6.49.1--canary.1313.20102090431.0
+  resolution: "@grafana/scenes@npm:6.49.1--canary.1313.20102090431.0"
   dependencies:
     "@floating-ui/react": "npm:^0.26.16"
     "@leeoniya/ufuzzy": "npm:^1.0.16"
@@ -3671,7 +3671,7 @@ __metadata:
     react: ^18.0.0
     react-dom: ^18.0.0
     react-router-dom: ^6.28.0
-  checksum: 10/0e873ceac0834879ade41df56ced5a3e8f6a10e5aba15a6f271327aa804729402bcf44845e54614dd0fb1541a28efbb9a5499acceae04cb8be3b11bcdc230347
+  checksum: 10/4f2261cc19a4fe7c26b5113ffd940ecb478705c773ebd2fb7b26219ab53d6531a161136d2909847744ea22a5509a5de7fde5569b7fa35c6a00e874150031ac04
   languageName: node
   linkType: hard
 
@@ -19441,8 +19441,8 @@ __metadata:
     "@grafana/plugin-ui": "npm:^0.11.1"
     "@grafana/prometheus": "workspace:*"
     "@grafana/runtime": "workspace:*"
-    "@grafana/scenes": "npm:6.49.0"
-    "@grafana/scenes-react": "npm:6.49.0"
+    "@grafana/scenes": "npm:6.49.1--canary.1313.20102090431.0"
+    "@grafana/scenes-react": "npm:6.49.1--canary.1313.20102090431.0"
     "@grafana/schema": "workspace:*"
     "@grafana/sql": "workspace:*"
     "@grafana/test-utils": "workspace:*"