hmm

components/analytics/AnalyticsDashboard.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Suspense } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
@@ -18,14 +18,49 @@ import {
   RefreshCw
 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
-import RevenueChart from "./RevenueChart";
-import ProductPerformanceChart from "./ProductPerformanceChart";
-import CustomerInsightsChart from "./CustomerInsightsChart";
-import OrderAnalyticsChart from "./OrderAnalyticsChart";
 import MetricsCard from "./MetricsCard";
 import { getAnalyticsOverviewWithStore, type AnalyticsOverview } from "@/lib/services/analytics-service";
 import { formatGBP } from "@/utils/format";
 import { MetricsCardSkeleton } from './SkeletonLoaders';
+import dynamic from 'next/dynamic';
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Lazy load chart components
+const RevenueChart = dynamic(() => import('./RevenueChart'), {
+  loading: () => <ChartSkeleton />
+});
+
+const ProductPerformanceChart = dynamic(() => import('./ProductPerformanceChart'), {
+  loading: () => <ChartSkeleton />
+});
+
+const CustomerInsightsChart = dynamic(() => import('./CustomerInsightsChart'), {
+  loading: () => <ChartSkeleton />
+});
+
+const OrderAnalyticsChart = dynamic(() => import('./OrderAnalyticsChart'), {
+  loading: () => <ChartSkeleton />
+});
+
+// Chart loading skeleton
+function ChartSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </CardHeader>
+      <CardContent>
+        <div className="h-80 w-full flex items-center justify-center">
+          <div className="flex flex-col items-center gap-2">
+            <BarChart3 className="h-8 w-8 text-muted-foreground animate-pulse" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
 
 interface AnalyticsDashboardProps {
   initialData: AnalyticsOverview;
@@ -191,19 +226,27 @@ export default function AnalyticsDashboard({ initialData }: AnalyticsDashboardPr
           </TabsList>
 
           <TabsContent value="revenue" className="space-y-6">
-            <RevenueChart timeRange={timeRange} />
+            <Suspense fallback={<ChartSkeleton />}>
+              <RevenueChart timeRange={timeRange} />
+            </Suspense>
           </TabsContent>
 
           <TabsContent value="products" className="space-y-6">
-            <ProductPerformanceChart />
+            <Suspense fallback={<ChartSkeleton />}>
+              <ProductPerformanceChart />
+            </Suspense>
           </TabsContent>
 
           <TabsContent value="customers" className="space-y-6">
-            <CustomerInsightsChart />
+            <Suspense fallback={<ChartSkeleton />}>
+              <CustomerInsightsChart />
+            </Suspense>
           </TabsContent>
 
           <TabsContent value="orders" className="space-y-6">
-            <OrderAnalyticsChart timeRange={timeRange} />
+            <Suspense fallback={<ChartSkeleton />}>
+              <OrderAnalyticsChart timeRange={timeRange} />
+            </Suspense>
           </TabsContent>
         </Tabs>
       </div>