Moodinary/UI

Skeleton

Carga de contenido con forma conocida. Imitá la forma final para que nada salte.

Placeholder animado con la forma del contenido final. Evita saltos mientras carga.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/skeleton.json
import
import { Skeleton } from "@moodinary/ui/components/skeleton";

Ejemplos

Gráfico pendiente

El gráfico semanal reserva 220 px y su leyenda, como WeeklyChartPending en el panel.

Código
card.tsx
import { Card, CardContent } from "@moodinary/ui/components/card";
import { Skeleton } from "@moodinary/ui/components/skeleton";

export default function SkeletonCard() {
	return (
		<Card
			aria-busy="true"
			aria-label="Cargando gráfico"
			className="w-full"
			role="status"
		>
			<CardContent>
				<Skeleton className="h-[220px] w-full rounded-md" />
				<div className="mt-1.5 flex gap-x-4">
					<Skeleton className="h-3 w-28" />
					<Skeleton className="h-3 w-20" />
				</div>
			</CardContent>
		</Card>
	);
}

Indicadores

Para grillas de métricas que todavía no llegaron.

Código
stats.tsx
import { Skeleton } from "@moodinary/ui/components/skeleton";

export default function SkeletonStats() {
	return (
		<div
			aria-label="Cargando indicadores"
			className="w-full max-w-[420px]"
			role="status"
		>
			<div aria-hidden className="grid grid-cols-2 gap-4 sm:grid-cols-4">
				{[0, 1, 2, 3].map((index) => (
					<div key={index}>
						<Skeleton className="h-2.5 w-3/5" />
						<Skeleton className="mt-2 h-[22px] w-1/2" />
					</div>
				))}
			</div>
		</div>
	);
}

Props

Skeleton

PropTipoDefaultDescripción
classNamestring-Tamaño y forma del bloque.
...propsHTMLAttributes<HTMLDivElement>-Atributos nativos.

Cuándo sí y cuándo no

Hacé
  • Copiá la forma real.
  • Marcá el contenedor con aria-busy o status.
  • Reemplazalo apenas haya datos.
Evitá
  • No uses formas genéricas que después cambian.
  • No lo dejes para errores.
  • No anuncies cada bloque al lector de pantalla.

Accesibilidad

  • Cada skeleton es aria-hidden.
  • El contenedor anuncia la carga una sola vez.
  • Respeta reduced motion.