42 lines
1.8 KiB
TypeScript
42 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
|
|
export function LabSkeleton() {
|
|
return (
|
|
<div className="flex-1 w-full h-full bg-slate-50 dark:bg-[#1a1c22] relative overflow-hidden">
|
|
{/* Mesh grid background simulation */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
|
|
|
|
{/* Top Menu Skeleton */}
|
|
<div className="absolute top-4 left-4 flex gap-2">
|
|
<Skeleton className="h-10 w-32 rounded-lg" />
|
|
<Skeleton className="h-10 w-10 rounded-lg" />
|
|
</div>
|
|
|
|
{/* Style Menu Skeleton (Top Right) */}
|
|
<div className="absolute top-4 right-4 flex flex-col gap-2">
|
|
<Skeleton className="h-64 w-48 rounded-2xl" />
|
|
</div>
|
|
|
|
{/* Toolbar Skeleton (Bottom Center) */}
|
|
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 bg-white/50 dark:bg-black/20 backdrop-blur-md p-2 rounded-2xl border">
|
|
{Array.from({ length: 9 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-10 w-10 rounded-xl" />
|
|
))}
|
|
</div>
|
|
|
|
{/* Loading Indicator */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="flex flex-col items-center gap-4 bg-white/80 dark:bg-[#252830]/80 p-8 rounded-3xl border shadow-2xl backdrop-blur-xl animate-in fade-in zoom-in duration-500">
|
|
<div className="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin" />
|
|
<div className="flex flex-col items-center gap-1">
|
|
<h3 className="font-bold text-lg">Initialisation de l'espace</h3>
|
|
<p className="text-sm text-muted-foreground animate-pulse">Chargement de vos idées...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|