Capítulo 60 de 108

Skeleton

Core Idea

Placeholder visual (retângulo pulsante) usado para preencher o espaço de um conteúdo que ainda está carregando, evitando layout shift quando o conteúdo real chegar.

Key Concepts

  • Sem props próprias: Skeleton é só um div estilizado; toda a forma (tamanho, formato) vem de className (h-4 w-[250px], rounded-full, aspect-video, etc).
  • Composição por combinação: não há subcomponentes — monta-se um "esqueleto" de layout empilhando múltiplos <Skeleton> nas dimensões do conteúdo real (avatar + linhas de texto, card, formulário, tabela).

Code Examples

<div className="flex items-center gap-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>
  • O que demonstra: padrão clássico "avatar + duas linhas de texto" usando apenas classes de tamanho/forma.
export function SkeletonTable() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      {Array.from({ length: 5 }).map((_, index) => (
        <div className="flex gap-4" key={index}>
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-4 w-20" />
        </div>
      ))}
    </div>
  )
}
  • O que demonstra: skeleton de tabela gerado por loop, replicando as colunas reais.

Anti-patterns

  • Skeleton com dimensões que não batem com o conteúdo final: gera layout shift no momento em que o dado real substitui o placeholder — sempre espelhar altura/largura reais.
  • Um único skeleton genérico para toda a página: prefira compor um skeleton específico por seção (Card, Table, Form) para manter a percepção de estrutura.

Key Takeaways

  1. Skeleton não tem API além de className — a "modelagem" acontece 100% via Tailwind.
  2. Combine múltiplos Skeletons para replicar a estrutura exata do componente real (Card, Table, Form, Avatar).
  3. Use Array.from({ length: N }) para gerar linhas repetidas de skeleton em listas/tabelas.

Connects To

  • Card (ch064): padrão comum é um SkeletonCard que espelha CardHeader/CardContent.
  • Table (ch065): skeleton de linhas de tabela antes dos dados carregarem.
  • Spinner (ch059): alternativa quando não se conhece a forma final do conteúdo.
AnteriorSpinnerPróximoBadge