38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
/**
|
|
* Skeleton for Dialog content. Uses layout primitives; no arbitrary values.
|
|
* Use when dialog is open but content is loading.
|
|
*/
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface DialogSkeletonProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function DialogSkeleton({ className }: DialogSkeletonProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'rounded-xl border border-border bg-card',
|
|
'min-h-layout-story',
|
|
className,
|
|
)}
|
|
role="status"
|
|
aria-label="Chargement du dialogue"
|
|
>
|
|
<div className="p-8 border-b border-border">
|
|
<div className="h-8 w-2/3 max-w-md rounded bg-muted animate-pulse" />
|
|
</div>
|
|
<div className="p-8 space-y-2">
|
|
<div className="h-4 w-full rounded bg-muted animate-pulse" />
|
|
<div className="h-4 w-3/4 rounded bg-muted animate-pulse" />
|
|
<div className="h-4 w-1/2 rounded bg-muted animate-pulse" />
|
|
</div>
|
|
<div className="flex justify-end gap-2 p-8 border-t border-border">
|
|
<div className="h-10 w-24 rounded bg-muted animate-pulse" />
|
|
<div className="h-10 w-24 rounded bg-muted animate-pulse" />
|
|
</div>
|
|
<span className="sr-only">Chargement du dialogue en cours...</span>
|
|
</div>
|
|
);
|
|
}
|