57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
export default function Loading() {
|
|
return (
|
|
<div className="min-h-screen">
|
|
<div className="fixed inset-0 -z-10">
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(16,185,129,0.12),transparent)]" />
|
|
<div className="absolute inset-0 bg-zinc-950" style={{ zIndex: -1 }} />
|
|
</div>
|
|
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12 animate-pulse">
|
|
{/* Header skeleton */}
|
|
<div className="flex items-center gap-3 mb-10">
|
|
<div className="w-10 h-10 rounded-xl bg-zinc-800" />
|
|
<div>
|
|
<div className="h-6 w-40 rounded bg-zinc-800 mb-1.5" />
|
|
<div className="h-4 w-64 rounded bg-zinc-900" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats skeleton */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="rounded-xl border border-zinc-800/80 bg-zinc-900/60 p-4"
|
|
>
|
|
<div className="h-3 w-16 rounded bg-zinc-800 mb-2" />
|
|
<div className="h-7 w-10 rounded bg-zinc-800" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Search skeleton */}
|
|
<div className="h-10 rounded-xl bg-zinc-900 border border-zinc-800 mb-6" />
|
|
|
|
{/* Card skeletons */}
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="rounded-xl border border-zinc-800/80 bg-zinc-900/60 p-5"
|
|
>
|
|
<div className="flex items-center gap-2.5 mb-3">
|
|
<div className="w-8 h-8 rounded-lg bg-zinc-800" />
|
|
<div className="h-5 w-32 rounded bg-zinc-800" />
|
|
</div>
|
|
<div className="h-4 w-48 rounded bg-zinc-800/60 mb-3" />
|
|
<div className="pt-3 border-t border-zinc-800/50">
|
|
<div className="h-3 w-20 rounded bg-zinc-800/40" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|