feat(dashboards): Load dashboard items in a sensible order (#20158)

feat(dashboards): Load dashboards in a sensible order
PostHog · Feb 6, 2024 · 1803fe6 · 1803fe6
1 parent 2808a29
commit 1803fe6
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -153,6 +153,8 @@ export interface InsightCardProps extends Resizeable, React.HTMLAttributes<HTMLD
     /** buttons to add to the "more" menu on the card**/
     moreButtons?: JSX.Element | null
     placement: DashboardPlacement | 'SavedInsightGrid'
+    /** Priority for loading the insight, lower is earlier. */
+    loadPriority?: number
 }
 
 function VizComponentFallback(): JSX.Element {
@@ -246,6 +248,7 @@ function InsightCardInternal(
         children,
         moreButtons,
         placement,
+        loadPriority,
         ...divProps
     }: InsightCardProps,
     ref: React.Ref<HTMLDivElement>
@@ -254,6 +257,7 @@ function InsightCardInternal(
         dashboardItemId: insight.short_id,
         dashboardId: dashboardId,
         cachedInsight: insight,
+        loadPriority,
     }
 
     const { insightLoading } = useValues(insightLogic(insightLogicProps))

diff --git a/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts b/frontend/src/queries/nodes/DataNode/dataNodeLogic.ts
@@ -151,6 +151,7 @@ export const dataNodeLogic = kea<dataNodeLogicType>([
                         const response = await concurrencyController.run({
                             debugTag: props.query.kind,
                             abortController,
+                            priority: props.loadPriority,
                             fn: async (): Promise<{ duration: number; data: Record<string, any> }> => {
                                 const now = performance.now()
                                 try {

diff --git a/frontend/src/scenes/dashboard/DashboardItems.tsx b/frontend/src/scenes/dashboard/DashboardItems.tsx
@@ -99,6 +99,9 @@ export function DashboardItems(): JSX.Element {
             >
                 {tiles?.map((tile: DashboardTile) => {
                     const { insight, text } = tile
+                    const smLayout = layouts['sm']?.find((l) => {
+                        return l.i == tile.id.toString()
+                    })
 
                     const commonTileProps = {
                         dashboardId: dashboard?.id,
@@ -140,6 +143,7 @@ export function DashboardItems(): JSX.Element {
                                 duplicate={() => duplicateInsight(insight)}
                                 showDetailsControls={placement != DashboardPlacement.Export}
                                 placement={placement}
+                                loadPriority={smLayout ? smLayout.y * 1000 + smLayout.x : undefined}
                                 {...commonTileProps}
                             />
                         )

diff --git a/frontend/src/scenes/insights/insightDataLogic.ts b/frontend/src/scenes/insights/insightDataLogic.ts
@@ -40,7 +40,10 @@ export const insightDataLogic = kea<insightDataLogicType>([
         values: [
             insightLogic,
             ['filters', 'insight', 'savedInsight'],
-            dataNodeLogic({ key: insightVizDataNodeKey(props) } as DataNodeLogicProps),
+            dataNodeLogic({
+                key: insightVizDataNodeKey(props),
+                loadPriority: props.loadPriority,
+            } as DataNodeLogicProps),
             [
                 'query as insightQuery',
                 'response as insightDataRaw',