a lot

apps/web/src/components/report/chart/ChartProvider.tsx

@@ -1,7 +1,18 @@
-import { createContext, memo, useContext, useMemo } from 'react';
+'use client';
+
+import {
+  createContext,
+  memo,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import type { IChartSerie } from '@/server/api/routers/chart';
 import type { IChartInput } from '@/types';
 
+import { ChartLoading } from './ChartLoading';
+
 export interface ChartContextType extends IChartInput {
   editMode?: boolean;
   hideID?: boolean;
@@ -53,6 +64,16 @@ export function withChartProivder<ComponentProps>(
   WrappedComponent: React.FC<ComponentProps>
 ) {
   const WithChartProvider = (props: ComponentProps & ChartContextType) => {
+    const [mounted, setMounted] = useState(props.chartType === 'metric');
+
+    useEffect(() => {
+      setMounted(true);
+    }, []);
+
+    if (!mounted) {
+      return <ChartLoading />;
+    }
+
     return (
       <ChartProvider {...props}>
         <WrappedComponent {...props} />