fe01f31538
Some checks failed
Build Frontend / build (push) Failing after 7s
Replaces imports from 'components/ui' with 'components/common' across the app and dashboard pages, and updates model and API imports to use new paths under 'lib'. Removes redundant authentication checks from several dashboard pages. Adds new dashboard components and utility files, and reorganizes hooks and services into the 'lib' directory for improved structure.
81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/common/card";
|
|
import { Skeleton } from "@/components/common/skeleton";
|
|
import Layout from "@/components/layout/layout";
|
|
import { Loader2 } from "lucide-react";
|
|
import { SnowLoader } from "@/components/snow-loader";
|
|
|
|
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 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
|
|
{[...Array(4)].map((_, i) => (
|
|
<Card key={i} className="border-border/40 shadow-sm">
|
|
<CardHeader className="pb-2">
|
|
<div className="text-sm text-muted-foreground">
|
|
<Skeleton className="h-4 w-24" />
|
|
</div>
|
|
<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">
|
|
<SnowLoader className="z-0" count={30} />
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
|
|
<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>
|
|
<div className="text-sm text-muted-foreground">
|
|
<Skeleton className="h-4 w-80 mt-1" />
|
|
</div>
|
|
</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>
|
|
);
|
|
}
|