From 64701bf29f4e0b08e93ea48ad6d2b6a90be5ea5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 26 Mar 2024 22:14:18 +0100
Subject: [PATCH] dashboard: lazy load charts on overview

---
 .../overview-latest-events.tsx                  |  4 ++--
 .../overview/overview-top-devices.tsx           |  4 ++--
 .../overview-top-events/overview-top-events.tsx |  3 ++-
 .../components/overview/overview-top-geo.tsx    |  3 ++-
 .../components/overview/overview-top-pages.tsx  |  4 ++--
 .../overview/overview-top-sources.tsx           |  4 ++--
 .../src/components/report/chart/Chart.tsx       | 17 +++++++++++------
 7 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/dashboard/src/components/overview/overview-latest-events/overview-latest-events.tsx b/apps/dashboard/src/components/overview/overview-latest-events/overview-latest-events.tsx
index 9e21200d..4594abed 100644
--- a/apps/dashboard/src/components/overview/overview-latest-events/overview-latest-events.tsx
+++ b/apps/dashboard/src/components/overview/overview-latest-events/overview-latest-events.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChartSwitch } from '@/components/report/chart';
+import { LazyChart } from '@/components/report/chart/LazyChart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
@@ -120,7 +120,7 @@ export default function OverviewLatestEvents({
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <ChartSwitch hideID {...widget.chart} previous={false} />
+          <LazyChart hideID {...widget.chart} previous={false} />
         </WidgetBody>
       </Widget>
     </>
diff --git a/apps/dashboard/src/components/overview/overview-top-devices.tsx b/apps/dashboard/src/components/overview/overview-top-devices.tsx
index f89bc21f..4427f2ef 100644
--- a/apps/dashboard/src/components/overview/overview-top-devices.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-devices.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
 import type { IChartType } from '@openpanel/validation';
 
+import { LazyChart } from '../report/chart/LazyChart';
 import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -198,7 +198,7 @@ export default function OverviewTopDevices({
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <ChartSwitch
+          <LazyChart
             hideID
             {...widget.chart}
             previous={false}
diff --git a/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx b/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
index e5076eae..6971b340 100644
--- a/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { ChartSwitch } from '@/components/report/chart';
+import { LazyChart } from '@/components/report/chart/LazyChart';
 import { Button } from '@/components/ui/button';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
@@ -130,7 +131,7 @@ export default function OverviewTopEvents({
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <ChartSwitch hideID {...widget.chart} previous={false} />
+          <LazyChart hideID {...widget.chart} previous={false} />
         </WidgetBody>
       </Widget>
     </>
diff --git a/apps/dashboard/src/components/overview/overview-top-geo.tsx b/apps/dashboard/src/components/overview/overview-top-geo.tsx
index fe6cf34b..4c56646f 100644
--- a/apps/dashboard/src/components/overview/overview-top-geo.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-geo.tsx
@@ -7,6 +7,7 @@ import { cn } from '@/utils/cn';
 
 import type { IChartType } from '@openpanel/validation';
 
+import { LazyChart } from '../report/chart/LazyChart';
 import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -136,7 +137,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <ChartSwitch
+          <LazyChart
             hideID
             {...widget.chart}
             previous={false}
diff --git a/apps/dashboard/src/components/overview/overview-top-pages.tsx b/apps/dashboard/src/components/overview/overview-top-pages.tsx
index 9b6f78bd..d5aa772c 100644
--- a/apps/dashboard/src/components/overview/overview-top-pages.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-pages.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
 import type { IChartType } from '@openpanel/validation';
 
+import { LazyChart } from '../report/chart/LazyChart';
 import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -135,7 +135,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <ChartSwitch
+          <LazyChart
             hideID
             {...widget.chart}
             previous={false}
diff --git a/apps/dashboard/src/components/overview/overview-top-sources.tsx b/apps/dashboard/src/components/overview/overview-top-sources.tsx
index 88477eb7..325bd4bc 100644
--- a/apps/dashboard/src/components/overview/overview-top-sources.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-sources.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
 import type { IChartType } from '@openpanel/validation';
 
+import { LazyChart } from '../report/chart/LazyChart';
 import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -289,7 +289,7 @@ export default function OverviewTopSources({
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <ChartSwitch
+          <LazyChart
             hideID
             {...widget.chart}
             previous={false}
diff --git a/apps/dashboard/src/components/report/chart/Chart.tsx b/apps/dashboard/src/components/report/chart/Chart.tsx
index 3fc7d554..220b80d8 100644
--- a/apps/dashboard/src/components/report/chart/Chart.tsx
+++ b/apps/dashboard/src/components/report/chart/Chart.tsx
@@ -31,12 +31,17 @@ export function Chart({
   startDate,
   endDate,
 }: ReportChartProps) {
-  const [references] = api.reference.getChartReferences.useSuspenseQuery({
-    projectId,
-    startDate,
-    endDate,
-    range,
-  });
+  const [references] = api.reference.getChartReferences.useSuspenseQuery(
+    {
+      projectId,
+      startDate,
+      endDate,
+      range,
+    },
+    {
+      staleTime: 1000 * 60 * 5,
+    }
+  );
 
   const [data] = api.chart.chart.useSuspenseQuery(
     {