From 2329982cd14d9d9ea58b4c0e670bc9db9626ebf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Wed, 23 Oct 2024 20:15:17 +0200
Subject: [PATCH] fix(dashboard): actually lazy load reports

---
 apps/dashboard/src/components/report-chart/area/index.tsx    | 1 +
 apps/dashboard/src/components/report-chart/bar/index.tsx     | 1 +
 apps/dashboard/src/components/report-chart/funnel/index.tsx  | 1 +
 .../src/components/report-chart/histogram/index.tsx          | 1 +
 apps/dashboard/src/components/report-chart/line/index.tsx    | 1 +
 apps/dashboard/src/components/report-chart/map/index.tsx     | 1 +
 apps/dashboard/src/components/report-chart/metric/index.tsx  | 1 +
 apps/dashboard/src/components/report-chart/pie/index.tsx     | 1 +
 .../src/components/report-chart/retention/index.tsx          | 5 ++++-
 9 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/report-chart/area/index.tsx b/apps/dashboard/src/components/report-chart/area/index.tsx
index 5f3f7e25..0b9269f0 100644
--- a/apps/dashboard/src/components/report-chart/area/index.tsx
+++ b/apps/dashboard/src/components/report-chart/area/index.tsx
@@ -13,6 +13,7 @@ export function ReportAreaChart() {
   const res = api.chart.chart.useQuery(report, {
     keepPreviousData: true,
     staleTime: 1000 * 60 * 1,
+    enabled: !isLazyLoading,
   });
 
   if (
diff --git a/apps/dashboard/src/components/report-chart/bar/index.tsx b/apps/dashboard/src/components/report-chart/bar/index.tsx
index 330f6747..00690392 100644
--- a/apps/dashboard/src/components/report-chart/bar/index.tsx
+++ b/apps/dashboard/src/components/report-chart/bar/index.tsx
@@ -12,6 +12,7 @@ export function ReportBarChart() {
   const res = api.chart.chart.useQuery(report, {
     keepPreviousData: true,
     staleTime: 1000 * 60 * 1,
+    enabled: !isLazyLoading,
   });
 
   if (
diff --git a/apps/dashboard/src/components/report-chart/funnel/index.tsx b/apps/dashboard/src/components/report-chart/funnel/index.tsx
index b9728ebf..d8889b77 100644
--- a/apps/dashboard/src/components/report-chart/funnel/index.tsx
+++ b/apps/dashboard/src/components/report-chart/funnel/index.tsx
@@ -31,6 +31,7 @@ export function ReportFunnelChart() {
   };
   const res = api.chart.funnel.useQuery(input, {
     keepPreviousData: true,
+    enabled: !isLazyLoading,
   });
 
   if (isLazyLoading || res.isLoading) {
diff --git a/apps/dashboard/src/components/report-chart/histogram/index.tsx b/apps/dashboard/src/components/report-chart/histogram/index.tsx
index 197c45e1..c578ed1a 100644
--- a/apps/dashboard/src/components/report-chart/histogram/index.tsx
+++ b/apps/dashboard/src/components/report-chart/histogram/index.tsx
@@ -13,6 +13,7 @@ export function ReportHistogramChart() {
   const res = api.chart.chart.useQuery(report, {
     keepPreviousData: true,
     staleTime: 1000 * 60 * 1,
+    enabled: !isLazyLoading,
   });
 
   if (
diff --git a/apps/dashboard/src/components/report-chart/line/index.tsx b/apps/dashboard/src/components/report-chart/line/index.tsx
index 09c67239..10bfa00c 100644
--- a/apps/dashboard/src/components/report-chart/line/index.tsx
+++ b/apps/dashboard/src/components/report-chart/line/index.tsx
@@ -14,6 +14,7 @@ export function ReportLineChart() {
   const res = api.chart.chart.useQuery(report, {
     keepPreviousData: true,
     staleTime: 1000 * 60 * 1,
+    enabled: !isLazyLoading,
   });
 
   if (
diff --git a/apps/dashboard/src/components/report-chart/map/index.tsx b/apps/dashboard/src/components/report-chart/map/index.tsx
index 4ee5376c..0c3cc172 100644
--- a/apps/dashboard/src/components/report-chart/map/index.tsx
+++ b/apps/dashboard/src/components/report-chart/map/index.tsx
@@ -13,6 +13,7 @@ export function ReportMapChart() {
   const res = api.chart.chart.useQuery(report, {
     keepPreviousData: true,
     staleTime: 1000 * 60 * 1,
+    enabled: !isLazyLoading,
   });
 
   if (
diff --git a/apps/dashboard/src/components/report-chart/metric/index.tsx b/apps/dashboard/src/components/report-chart/metric/index.tsx
index 5df27988..bea88f05 100644
--- a/apps/dashboard/src/components/report-chart/metric/index.tsx
+++ b/apps/dashboard/src/components/report-chart/metric/index.tsx
@@ -9,6 +9,7 @@ export function ReportMetricChart() {
   const res = api.chart.chart.useQuery(report, {
     keepPreviousData: true,
     staleTime: 1000 * 60 * 1,
+    enabled: !isLazyLoading,
   });
 
   if (
diff --git a/apps/dashboard/src/components/report-chart/pie/index.tsx b/apps/dashboard/src/components/report-chart/pie/index.tsx
index 60514ca0..621f91af 100644
--- a/apps/dashboard/src/components/report-chart/pie/index.tsx
+++ b/apps/dashboard/src/components/report-chart/pie/index.tsx
@@ -13,6 +13,7 @@ export function ReportPieChart() {
   const res = api.chart.chart.useQuery(report, {
     keepPreviousData: true,
     staleTime: 1000 * 60 * 1,
+    enabled: !isLazyLoading,
   });
 
   if (
diff --git a/apps/dashboard/src/components/report-chart/retention/index.tsx b/apps/dashboard/src/components/report-chart/retention/index.tsx
index 9fc0e11d..27b835c9 100644
--- a/apps/dashboard/src/components/report-chart/retention/index.tsx
+++ b/apps/dashboard/src/components/report-chart/retention/index.tsx
@@ -25,7 +25,8 @@ export function ReportRetentionChart() {
   } = useReportChartContext();
   const firstEvent = (events[0]?.filters[0]?.value ?? []).map(String);
   const secondEvent = (events[1]?.filters[0]?.value ?? []).map(String);
-  const isEnabled = firstEvent.length > 0 && secondEvent.length > 0;
+  const isEnabled =
+    firstEvent.length > 0 && secondEvent.length > 0 && !isLazyLoading;
   const res = api.chart.cohort.useQuery(
     {
       firstEvent,
@@ -38,6 +39,8 @@ export function ReportRetentionChart() {
       interval,
     },
     {
+      keepPreviousData: true,
+      staleTime: 1000 * 60 * 1,
       enabled: isEnabled,
     },
   );