Skeleton

Un marcador que brilla mientras carga el contenido, con el shimmer del sistema.

Instalación

$ pnpm dlx shadcn@latest add @ssntl/skeleton

Uso

tsx

import { Skeleton } from "@/components/ui/skeleton"

<div aria-busy="true">
  <span className="sr-only">Cargando perfil</span>
  <Skeleton className="size-12 rounded-full" />
  <Skeleton className="h-4 w-2/5" />
</div>

Necesita la utilidad shimmer importada en tu CSS global (se instala con el componente).
Es decorativo: la región que carga lleva aria-busy y un texto para lectores de pantalla.
Copia la forma del contenido real (avatar, líneas, imagen) para que nada salte al cargar.
Con movimiento reducido el brillo desaparece y el marcador queda quieto.

Código

components/ui/skeleton.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

// A placeholder that shimmers while content loads. It is decorative: put
// aria-busy on the region that is loading and say "Cargando" in text.
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      aria-hidden
      className={cn("shimmer rounded-xs", className)}
      {...props}
    />
  )
}

export { Skeleton }