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.
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import Layout from "@/components/layout/layout";
|
|
import { SnowLoader } from "@/components/snow-loader";
|
|
|
|
export default function AnalyticsLoading() {
|
|
return (
|
|
<Layout>
|
|
<div className="space-y-6 relative">
|
|
<SnowLoader className="z-0" count={25} />
|
|
<div>
|
|
<Skeleton className="h-8 w-64 mb-2" />
|
|
<Skeleton className="h-4 w-96" />
|
|
</div>
|
|
|
|
{/* Metrics Cards */}
|
|
<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}>
|
|
<CardHeader className="pb-2">
|
|
<Skeleton className="h-4 w-24" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Skeleton className="h-8 w-20 mb-2" />
|
|
<Skeleton className="h-3 w-32" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Completion Rate Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-48 mb-2" />
|
|
<Skeleton className="h-4 w-80" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-4">
|
|
<Skeleton className="h-8 w-16" />
|
|
<div className="flex-1">
|
|
<Skeleton className="h-2 w-full" />
|
|
</div>
|
|
<Skeleton className="h-6 w-20" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Analytics Tabs */}
|
|
<div className="space-y-6">
|
|
<Skeleton className="h-10 w-full" />
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-48 mb-2" />
|
|
<Skeleton className="h-4 w-80" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Skeleton className="h-64 w-full" />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|