PrimitivesEstável

Skeleton

Relatório de paridade: docs/atoms.md

Placeholder de carregamento. <Skeleton> é um bloco: width / height (número = px, string = literal; default 100% × 1rem), radius (default md), circle (vira quadrado com radius-full, lado = width) e animation (pulse padrão / wave / none).

<SkeletonText> desenha N linhas de texto falso: lines (default 3), gap, lastLineWidth (default 60%). Ambos são decorativos (aria-hidden) e respeitam prefers-reduced-motion.

Quando usar

Reservar o espaço de um conteúdo que está carregando, com a forma aproximada (avatar redondo, linhas de texto, bloco de mídia).
Progresso mensurável de uma operação → ProgressBar / ProgressCircle. Um spinner curto e centralizado → Spinner. "Nenhum resultado" → EmptyState.

Exemplos

Formas

<Skeleton circle width={48} />
<Skeleton width={120} height={12} />
<Skeleton width={200} height={40} radius="lg" />

SkeletonText

<SkeletonText lines={4} />

Placeholder de card

<div className="card">
  <Skeleton height={140} radius="lg" />
  <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
    <Skeleton circle width={36} />
    <Skeleton width={120} height={12} />
  </div>
  <SkeletonText lines={3} />
</div>

Animação wave

<Skeleton width={280} height={48} radius="lg" animation="wave" />

Playground

animation

radius

circle

<Skeleton width={240} height={16} />

Props

Prop	Tipo	padrão	Descrição
`animation`	`"none" \| "pulse" \| "wave"`	`pulse`	Default `"pulse"`. Respeita `prefers-reduced-motion`.
`circle`	`boolean`	`false`	Círculo — `radius-full` + proporção quadrada (usa `width` como lado).
`height`	`string \| number`	`—`	—
`radius`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"`	`md`	Raio dos cantos. Default `"md"`. Ignorado quando `circle`.
`width`	`string \| number`	`—`	—

Acessibilidade

O skeleton é aria-hidden — quem deve anunciar o carregamento é o contêiner, com aria-busy="true" enquanto os dados não chegam.
A animação para em prefers-reduced-motion (além do kill global do reset.css).