Navegação

Componentes

Skeleton

beta

Reserva o espaço que o conteúdo vai ocupar. É o padrão de carregamento de tela, porque evita o salto quando os dados chegam.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/skeleton

Playground
<Skeleton className="h-4 w-40" />

Uso

Reserva o espaço que o conteúdo vai ocupar enquanto ele carrega. É o padrão para carregamento de tela — evita o salto de layout quando os dados chegam.

Formas

Não existe variante pronta: dimensione com classes de largura, altura e raio para imitar o que vai aparecer ali — texto, avatar, cartão.

Lista de turmas

Composto para imitar a linha real que vai substituir cada skeleton: mesma grade, mesmas proporções. Quem olha para o carregamento já reconhece o formato do conteúdo.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Skeleton não tem props próprias — aceita apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css