fix(dashboard): remove loading state when we already have some data

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 />;
   }
 

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 />;
   }
 

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>

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 />;
   }
 

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 />;
   }
 

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 />;
   }
 

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 />;
   }
 

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 />;
   }
 

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 />;
   }