veza/apps/web/src/components/ui/dialog/DialogSkeleton.tsx

/**
 * 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>
  );
}