Skeleton.

<div class="ui-sample ui-skeleton"><div data-skeleton aria-hidden="true"><span></span><span></span><span></span></div><span class="sr-only" role="status">Cargando contenido</span></div>

<div class="ui-sample ui-skeleton border border-slate-300 bg-white p-4 text-slate-950"><div data-skeleton aria-hidden="true"><span></span><span></span><span></span></div><span class="sr-only" role="status">Cargando contenido</span></div>

export interface SkeletonProps {
  /** Cantidad de líneas de relleno; aproxima el alto del contenido que va a llegar. */
  lines?: number;
  /** Aviso para lectores de pantalla, en una región `role="status"`; vacío lo omite. */
  label?: string;
  className?: string;
}

/**
 * Esqueleto de carga: líneas de relleno que ocupan el lugar del contenido mientras llega, para que la página no salte al cargarlo.
 *
 * Las líneas quedan ocultas para lectores de pantalla; el aviso `label` es lo único que se anuncia.
 *
 * @example <Skeleton />
 * @example <Skeleton lines={4} label="Cargando resultados" />
 */
export function Skeleton({ lines = 3, label = "Cargando contenido", className }: SkeletonProps) {
  if (!(lines > 0) && !label) return null;
  return (
    <div className={["ui-skeleton", className].filter(Boolean).join(" ")}>
      {lines > 0 ? (
        <div data-skeleton aria-hidden="true">
          {Array.from({ length: lines }, (_, indice) => <span key={indice}></span>)}
        </div>
      ) : null}
      {label ? <span className="sr-only" role="status">{label}</span> : null}
    </div>
  );
}