Skeleton

Feedbackserver safe

Placeholder animado para conteúdo em carregamento, retangular ou circular, sem estado próprio.

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Skeleton } from "@trdr/ui/skeleton"

Uso

import { Skeleton } from "@trdr/ui/skeleton"

export function Exemplo() {
  return <Skeleton />
}

Props

SkeletonPropsestende React.HTMLAttributes<HTMLDivElement>

Prop	Tipo	Descrição
shape?	"rectangle" \| "circle"	Formato do placeholder: retangular para bloco de texto/imagem, circular para avatar.

Quando usar

Use o skeleton para ocupar o espaco de um conteudo que ainda esta chegando (texto, avatar, cartao, linha de tabela), mantendo o layout estavel enquanto os dados carregam. Ele evita o salto visual que acontece quando o conteudo real aparece de repente e empurra tudo ao redor.

Combine varios skeletons para desenhar o "esqueleto" da tela real: um circulo para avatar, tiras para linhas de texto, na mesma proporcao aproximada do conteudo final.

Quando nao usar

Nao use skeleton para um carregamento que dura menos de alguns instantes: um flash de placeholder e pior do que nenhum. Nao use skeleton para comunicar erro ou estado vazio, ele comunica apenas "isto esta carregando"; para os outros casos use um estado dedicado.

Anatomia

Um unico elemento (data-slot="skeleton"), um <div> sem filhos e sem estado. A prop shape controla o formato: rectangle (padrao, cantos arredondados) para blocos de texto ou imagem, e circle para avatar. Tamanho e proporcao ficam a cargo do consumidor via className (h-*, w-*, size-*).

Acessibilidade

O skeleton carrega aria-hidden="true": ele e puramente visual e nao deve ser anunciado por leitor de tela. A animacao de pulso respeita motion-reduce: quando o usuario pede menos movimento no sistema, o skeleton fica estatico em vez de pulsar.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="skeleton"]

1 tokens usados

bg-muted