From 1803fe677a2dbfc22b23e03fe829989386e4b0cc Mon Sep 17 00:00:00 2001
From: Robbie <robbie.coomber@gmail.com>
Date: Tue, 6 Feb 2024 16:03:58 +0000
Subject: [PATCH] feat(dashboards): Load dashboard items in a sensible order
 (#20158)

feat(dashboards): Load dashboards in a sensible order
---
 .../src/lib/components/Cards/InsightCard/InsightCard.tsx     | 4 ++++
 frontend/src/queries/nodes/DataNode/dataNodeLogic.ts         | 1 +
 frontend/src/scenes/dashboard/DashboardItems.tsx             | 4 ++++
 frontend/src/scenes/insights/insightDataLogic.ts             | 5 ++++-
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
index 5f9beb4da907e..35edef0444cba 100644
--- 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
index 9e12a5dfe631b..444912d6e3d0e 100644
--- 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
index 0247b4087b26f..079f3a9631cef 100644
--- 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
index 81e1ae2aaafd2..1469fb0c3765a 100644
--- 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',