fix

components/analytics/SkeletonLoaders.tsx

@@ -0,0 +1,170 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Chart skeleton for revenue trends and order analytics
+export function ChartSkeleton({ 
+  title, 
+  description, 
+  icon: Icon,
+  showStats = false 
+}: { 
+  title: string; 
+  description: string; 
+  icon: any;
+  showStats?: boolean;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Icon className="h-5 w-5" />
+          {title}
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {/* Chart area */}
+          <div className="h-64 bg-muted/20 rounded-md animate-pulse" />
+          
+          {/* Summary stats if applicable */}
+          {showStats && (
+            <div className="grid grid-cols-3 gap-4 pt-4 border-t">
+              {[...Array(3)].map((_, i) => (
+                <div key={i} className="text-center space-y-2">
+                  <Skeleton className="h-8 w-20 mx-auto" />
+                  <Skeleton className="h-4 w-24 mx-auto" />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Table skeleton for product performance
+export function TableSkeleton({ 
+  title, 
+  description, 
+  icon: Icon,
+  rows = 5,
+  columns = 5
+}: { 
+  title: string; 
+  description: string; 
+  icon: any;
+  rows?: number;
+  columns?: number;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Icon className="h-5 w-5" />
+          {title}
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {/* Table header */}
+          <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
+            {[...Array(columns)].map((_, i) => (
+              <Skeleton key={i} className="h-4 w-full" />
+            ))}
+          </div>
+          
+          {/* Table rows */}
+          {[...Array(rows)].map((_, rowIndex) => (
+            <div key={rowIndex} className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
+              {[...Array(columns)].map((_, colIndex) => (
+                <div key={colIndex} className="flex items-center gap-3">
+                  {colIndex === 0 && (
+                    <Skeleton className="h-10 w-10 rounded" />
+                  )}
+                  <Skeleton className="h-4 flex-1" />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Customer insights skeleton with segments
+export function CustomerInsightsSkeleton({ 
+  title, 
+  description, 
+  icon: Icon 
+}: { 
+  title: string; 
+  description: string; 
+  icon: any;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Icon className="h-5 w-5" />
+          {title}
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {/* Customer segments */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="text-center space-y-2">
+                <Skeleton className="h-8 w-16 mx-auto" />
+                <Skeleton className="h-4 w-20 mx-auto" />
+              </div>
+            ))}
+          </div>
+          
+          {/* Top customers table */}
+          <div className="space-y-4">
+            <Skeleton className="h-6 w-32" />
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center justify-between p-4 border rounded-lg">
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-3 w-16" />
+                </div>
+                <div className="text-right space-y-2">
+                  <Skeleton className="h-4 w-16" />
+                  <Skeleton className="h-3 w-12" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Metrics card skeleton
+export function MetricsCardSkeleton() {
+  return (
+    <Card>
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-8 w-20" />
+          </div>
+          <Skeleton className="h-8 w-8 rounded" />
+        </div>
+        <div className="mt-4 flex items-center gap-2">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}