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

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)}%)`,
       }}