e7fcfd63a2
Introduces a Christmas theme that activates in December, including themed colors, subtle background patterns, and snowflake effects on loading screens. Adds a reusable SnowLoader component and utility for December detection. Updates layout and loading components to conditionally apply decorations and styles only during December.
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
"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";
|
|
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>
|
|
);
|
|
}
|