hmm

app/dashboard/page.tsx

@@ -1,10 +1,72 @@
 import Dashboard from "@/components/dashboard/dashboard";
-import Content from "@/components/dashboard/content";
 import { fetchServer } from '@/lib/api';
 import { performance } from 'perf_hooks';
 import { Info, GitCommit, User, Zap } from 'lucide-react';
 import packageJson from '../../package.json';
 import { getGitInfo, getShortGitHash } from '@/lib/utils/git';
+import { Suspense } from 'react';
+import dynamic from 'next/dynamic';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+// Lazy load the Content component
+const Content = dynamic(() => import("@/components/dashboard/content"), {
+  loading: () => <DashboardContentSkeleton />
+});
+
+// Loading skeleton for the dashboard content
+function DashboardContentSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Header skeleton */}
+      <div>
+        <Skeleton className="h-8 w-64 mb-2" />
+        <Skeleton className="h-4 w-96" />
+      </div>
+
+      {/* Stats cards skeleton */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {[...Array(4)].map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-5 w-5 rounded" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-7 w-16 mb-1" />
+              <Skeleton className="h-3 w-24" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Best selling products skeleton */}
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-48" />
+          <Skeleton className="h-4 w-72" />
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center gap-4">
+                <Skeleton className="h-12 w-12 rounded-md" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-40" />
+                  <Skeleton className="h-4 w-20" />
+                </div>
+                <div className="ml-auto text-right">
+                  <Skeleton className="h-4 w-16 ml-auto" />
+                  <Skeleton className="h-4 w-16 ml-auto mt-2" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
 
 // ✅ Corrected Vendor Type
 interface Vendor {
@@ -46,7 +108,9 @@ export default async function DashboardPage() {
 
   return (
     <Dashboard>
-      <Content username={vendor.username} orderStats={orderStats} />
+      <Suspense fallback={<DashboardContentSkeleton />}>
+        <Content username={vendor.username} orderStats={orderStats} />
+      </Suspense>
       <div className="fixed bottom-2 right-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded border border-border/50 z-50 flex items-center space-x-2">
         <div className="flex items-center gap-1">
           <Info size={12} className="text-muted-foreground/80" />