From 0959ede05584208652f005d45cb084d5e2d3b319 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Fri, 20 Sep 2024 15:01:08 +0200
Subject: [PATCH] fix(dashboard): remove loading state when we already have
 some data

---
 .../src/components/report-chart/area/index.tsx         |  6 +++++-
 .../src/components/report-chart/bar/index.tsx          |  6 +++++-
 .../src/components/report-chart/funnel/chart.tsx       | 10 ++++++++--
 .../src/components/report-chart/funnel/index.tsx       |  2 +-
 .../src/components/report-chart/histogram/index.tsx    |  6 +++++-
 .../src/components/report-chart/line/index.tsx         |  6 +++++-
 .../src/components/report-chart/map/index.tsx          |  6 +++++-
 .../src/components/report-chart/metric/index.tsx       |  6 +++++-
 .../src/components/report-chart/pie/index.tsx          |  6 +++++-
 apps/dashboard/src/components/ui/progress.tsx          |  8 ++++++--
 10 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/apps/dashboard/src/components/report-chart/area/index.tsx b/apps/dashboard/src/components/report-chart/area/index.tsx
index 01b647a5..5f3f7e25 100644
--- a/apps/dashboard/src/components/report-chart/area/index.tsx
+++ b/apps/dashboard/src/components/report-chart/area/index.tsx
@@ -15,7 +15,11 @@ export function ReportAreaChart() {
     staleTime: 1000 * 60 * 1,
   });
 
-  if (isLazyLoading || res.isLoading || res.isFetching) {
+  if (
+    isLazyLoading ||
+    res.isLoading ||
+    (res.isFetching && !res.data?.series.length)
+  ) {
     return <Loading />;
   }
 
diff --git a/apps/dashboard/src/components/report-chart/bar/index.tsx b/apps/dashboard/src/components/report-chart/bar/index.tsx
index 5ffc7b2f..330f6747 100644
--- a/apps/dashboard/src/components/report-chart/bar/index.tsx
+++ b/apps/dashboard/src/components/report-chart/bar/index.tsx
@@ -14,7 +14,11 @@ export function ReportBarChart() {
     staleTime: 1000 * 60 * 1,
   });
 
-  if (isLazyLoading || res.isLoading || res.isFetching) {
+  if (
+    isLazyLoading ||
+    res.isLoading ||
+    (res.isFetching && !res.data?.series.length)
+  ) {
     return <Loading />;
   }
 
diff --git a/apps/dashboard/src/components/report-chart/funnel/chart.tsx b/apps/dashboard/src/components/report-chart/funnel/chart.tsx
index c77ed13b..abc21bc0 100644
--- a/apps/dashboard/src/components/report-chart/funnel/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/funnel/chart.tsx
@@ -98,7 +98,7 @@ export function Chart({
                 >
                   <div
                     className={cn(
-                      'bg-def-400 w-full',
+                      'bg-foreground w-full',
                       step.event.id === mostDropoffs.event.id && 'bg-rose-500',
                     )}
                     style={{ height: `${step.percent}%` }}
@@ -236,7 +236,13 @@ export function Chart({
               </div>
               <Progress
                 size="lg"
-                className="w-full @2xl:w-1/2 text-white bg-def-200 mt-0.5 dark:text-black"
+                className={cn(
+                  'w-full @2xl:w-1/2 text-white bg-def-200 mt-0.5 dark:text-black',
+                )}
+                innerClassName={cn(
+                  'bg-primary',
+                  step.event.id === mostDropoffs.event.id && 'bg-rose-500',
+                )}
                 value={percent}
               />
             </div>
diff --git a/apps/dashboard/src/components/report-chart/funnel/index.tsx b/apps/dashboard/src/components/report-chart/funnel/index.tsx
index 85773860..6fdb62ae 100644
--- a/apps/dashboard/src/components/report-chart/funnel/index.tsx
+++ b/apps/dashboard/src/components/report-chart/funnel/index.tsx
@@ -31,7 +31,7 @@ export function ReportFunnelChart() {
     keepPreviousData: true,
   });
 
-  if (isLazyLoading || res.isLoading || res.isFetching) {
+  if (isLazyLoading || res.isLoading) {
     return <Loading />;
   }
 
diff --git a/apps/dashboard/src/components/report-chart/histogram/index.tsx b/apps/dashboard/src/components/report-chart/histogram/index.tsx
index b06d86a2..197c45e1 100644
--- a/apps/dashboard/src/components/report-chart/histogram/index.tsx
+++ b/apps/dashboard/src/components/report-chart/histogram/index.tsx
@@ -15,7 +15,11 @@ export function ReportHistogramChart() {
     staleTime: 1000 * 60 * 1,
   });
 
-  if (isLazyLoading || res.isLoading || res.isFetching) {
+  if (
+    isLazyLoading ||
+    res.isLoading ||
+    (res.isFetching && !res.data?.series.length)
+  ) {
     return <Loading />;
   }
 
diff --git a/apps/dashboard/src/components/report-chart/line/index.tsx b/apps/dashboard/src/components/report-chart/line/index.tsx
index 02cb77f9..e6c85662 100644
--- a/apps/dashboard/src/components/report-chart/line/index.tsx
+++ b/apps/dashboard/src/components/report-chart/line/index.tsx
@@ -15,7 +15,11 @@ export function ReportLineChart() {
     staleTime: 1000 * 60 * 1,
   });
 
-  if (isLazyLoading || res.isLoading || res.isFetching) {
+  if (
+    isLazyLoading ||
+    res.isLoading ||
+    (res.isFetching && !res.data?.series.length)
+  ) {
     return <Loading />;
   }
 
diff --git a/apps/dashboard/src/components/report-chart/map/index.tsx b/apps/dashboard/src/components/report-chart/map/index.tsx
index 4cd0684a..4ee5376c 100644
--- a/apps/dashboard/src/components/report-chart/map/index.tsx
+++ b/apps/dashboard/src/components/report-chart/map/index.tsx
@@ -15,7 +15,11 @@ export function ReportMapChart() {
     staleTime: 1000 * 60 * 1,
   });
 
-  if (isLazyLoading || res.isLoading || res.isFetching) {
+  if (
+    isLazyLoading ||
+    res.isLoading ||
+    (res.isFetching && !res.data?.series.length)
+  ) {
     return <Loading />;
   }
 
diff --git a/apps/dashboard/src/components/report-chart/metric/index.tsx b/apps/dashboard/src/components/report-chart/metric/index.tsx
index 7c82b8a3..5df27988 100644
--- a/apps/dashboard/src/components/report-chart/metric/index.tsx
+++ b/apps/dashboard/src/components/report-chart/metric/index.tsx
@@ -11,7 +11,11 @@ export function ReportMetricChart() {
     staleTime: 1000 * 60 * 1,
   });
 
-  if (isLazyLoading || res.isLoading || res.isFetching) {
+  if (
+    isLazyLoading ||
+    res.isLoading ||
+    (res.isFetching && !res.data?.series.length)
+  ) {
     return <Loading />;
   }
 
diff --git a/apps/dashboard/src/components/report-chart/pie/index.tsx b/apps/dashboard/src/components/report-chart/pie/index.tsx
index 8461dc00..60514ca0 100644
--- a/apps/dashboard/src/components/report-chart/pie/index.tsx
+++ b/apps/dashboard/src/components/report-chart/pie/index.tsx
@@ -15,7 +15,11 @@ export function ReportPieChart() {
     staleTime: 1000 * 60 * 1,
   });
 
-  if (isLazyLoading || res.isLoading || res.isFetching) {
+  if (
+    isLazyLoading ||
+    res.isLoading ||
+    (res.isFetching && !res.data?.series.length)
+  ) {
     return <Loading />;
   }
 
diff --git a/apps/dashboard/src/components/ui/progress.tsx b/apps/dashboard/src/components/ui/progress.tsx
index 40dbba18..7aa20a5e 100644
--- a/apps/dashboard/src/components/ui/progress.tsx
+++ b/apps/dashboard/src/components/ui/progress.tsx
@@ -7,8 +7,9 @@ const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
     size?: 'sm' | 'default' | 'lg';
+    innerClassName?: string;
   }
->(({ className, value, size = 'default', ...props }, ref) => (
+>(({ className, innerClassName, value, size = 'default', ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
@@ -20,7 +21,10 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className={'h-full w-full flex-1 rounded bg-primary transition-all'}
+      className={cn(
+        'h-full w-full flex-1 rounded bg-primary transition-all',
+        innerClassName,
+      )}
       style={{
         transform: `translateX(-${100 - (value || 0)}%)`,
       }}