Skeleton

O Skeleton ocupa o espaço do conteúdo enquanto ele carrega, para a tela não pular. Use no lugar de "Carregando..." solto. Para ações em andamento use isPending no botão.

import { Skeleton } from "@rastreio-x/ui";

Padrão

O Skeleton é um bloco; você define tamanho e raio com classes. Marque-o aria-hidden, porque ele não tem significado.

Formas

Desenhe a forma do conteúdo real: círculo para avatar, linhas de larguras diferentes para texto.

Animação

animationType escolhe shimmer (padrão), pulse ou none. Em telas densas ou com muitos blocos, prefira pulse ou none.

Carregando uma lista

Mantenha a altura das linhas para não haver salto de layout, e sinalize o carregamento com aria-busy na região.

Anatomia

O Skeleton é uma peça só.

Propriedades

Animações

O brilho (shimmer) ou o pulso (pulse) é uma animação CSS contínua em loop. Com prefers-reduced-motion, a folha global da fachada reduz a duração das animações a 0,01 ms e o bloco fica estático; a posição e o tamanho continuam indicando o carregamento.

Acessibilidade

• O esqueleto é decorativo: aria-hidden="true".
• Marque a região que carrega com aria-busy="true" e troque para false ao terminar.
• Não use esqueleto para erros nem para listas vazias: use Alert e EmptyState.

Boas práticas

• Use para carregamentos acima de 300 ms; abaixo disso, o piscar atrapalha.
• Nunca deixe o esqueleto indefinidamente: mostre erro ou vazio quando falhar.
• Poucas formas por tela; não esqueletize cada palavra.

Relacionados

• EmptyState para quando não há nada para mostrar.
• Alert para quando o carregamento falha.
• Widget como contêiner de listas e métricas.