Skeleton
Atom
Skeleton reserva espaço enquanto conteúdo real carrega. Ele sugere estrutura, não progresso.
Use Skeleton quando a forma do conteúdo é conhecida e o carregamento deve manter a estabilidade visual da página. Para espera sem estrutura previsível, use Spinner. Para avanço mensurável, use Progress.
Exemplos copiáveis
React
React
import * as React from "react"
type PulsoSkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
shape?: "line" | "block" | "circle"
}
export function PulsoSkeleton({ shape = "line", className, ...props }: PulsoSkeletonProps) {
return (
<div
aria-hidden="true"
data-shape={shape}
className={[
"animate-pulse rounded-[var(--radius-sm)] bg-[var(--muted)]",
shape === "line" ? "h-4 w-full" : "",
shape === "block" ? "h-24 w-full rounded-[var(--radius-md)]" : "",
shape === "circle" ? "size-10 rounded-full" : "",
className,
].filter(Boolean).join(" ")}
{...props}
/>
)
}<div className="grid gap-3" aria-label="Carregando resumo do caso">
<PulsoSkeleton className="w-32" />
<PulsoSkeleton shape="block" />
<PulsoSkeleton className="w-2/3" />
</div>Quando usar
- Conteúdo de card, tabela ou detalhe com estrutura previsível.
- Evitar layout shift enquanto dados chegam.
- Carregamento de listas onde a quantidade aproximada é conhecida.
Quando não usar
- Para operação sem estrutura visual previsível; use
Spinner. - Para progresso com percentual; use
Progress. - Para esconder erro de carregamento.
- Para conteúdo que aparece instantaneamente.
Acessibilidade
- Skeleton normalmente é decorativo: use
aria-hidden="true"nos blocos. - O container pode ter label ou status de carregamento quando necessário.
- Respeite
prefers-reduced-motion. - Não anuncie cada linha do skeleton para leitores de tela.
Regras
- Skeleton deve parecer a estrutura final.
- Não use shimmer agressivo.
- Reserve altura para evitar salto de layout.
- Troque por erro visível se o carregamento falhar.
- Conteúdo crítico não deve ficar preso em skeleton indefinidamente.
Last updated on