erm what the sigma

app/dashboard/loading.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import Layout from "@/components/layout/layout";
+import { Loader2 } from "lucide-react";
+
+export default function DashboardLoading() {
+  return (
+    <Layout>
+      <div className="space-y-6 animate-in fade-in duration-500">
+        {/* Header skeleton with greeting & quote */}
+        <div>
+          <Skeleton className="h-8 w-72 mb-2" />
+          <Skeleton className="h-4 w-96" />
+        </div>
+
+        {/* Order statistics skeletons */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i} className="border-border/40 shadow-sm">
+              <CardHeader className="pb-2">
+                <CardDescription>
+                  <Skeleton className="h-4 w-24" />
+                </CardDescription>
+                <div className="flex justify-between items-center">
+                  <CardTitle>
+                    <Skeleton className="h-7 w-16" />
+                  </CardTitle>
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                </div>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
+
+        {/* Best selling products skeleton */}
+        <Card className="border-border/40 shadow-sm mt-8 relative">
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg">
+              <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
+              <p className="text-lg font-medium">Loading dashboard data...</p>
+            </div>
+          </div>
+          
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <div>
+              <CardTitle>
+                <Skeleton className="h-6 w-52" />
+              </CardTitle>
+              <CardDescription>
+                <Skeleton className="h-4 w-80 mt-1" />
+              </CardDescription>
+            </div>
+          </CardHeader>
+          
+          <CardContent className="opacity-30">
+            <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>
+    </Layout>
+  );
+}