Skeleton

• Antecipar a estrutura de um conteúdo que está carregando: ocupar de antemão o espaço que o conteúdo real vai ocupar (uma imagem, um título, uma linha de texto), para que a tela não salte quando o carregamento terminar. Ex.: a linha de uma tabela enquanto a consulta que traz seus dados é resolvida.
• Mostrar conteúdo parcial já disponível: quando parte da tela já está disponível (em cache de uma sessão anterior) e o restante ainda está carregando. Isso permite que o usuário comece a ler o conteúdo já disponível enquanto o restante termina de carregar.
• Antecipar elementos de tamanho variável que demoram para renderizar: quando o conteúdo dinâmico inclui itens como imagens pesadas, banners publicitários ou componentes incorporados de terceiros, cujo tamanho final é conhecido de antemão mesmo que demorem para aparecer.

• Quando o componente final já tem seu próprio placeholder: a maioria dos átomos do Nimbus expõe sua própria versão de carregamento (Input.Skeleton, Text.Skeleton, Button.Skeleton, IconButton.Skeleton), já dimensionada para esse componente. Em vez disso, use o .Skeleton do componente correspondente e reserve o Skeleton atômico para layouts sem um equivalente próprio.
• Comunicar que um processo está em andamento após uma ação do usuário: quando o que está carregando não é conteúdo que vai aparecer no lugar do placeholder, mas o resultado de uma ação pontual (enviar um formulário, processar um pagamento). Em vez disso, use Spinner.
• Substituir conteúdo estático: elementos que não mudam de um carregamento para outro (um cabeçalho fixo, um ícone de marca). Exiba-os sempre, sem placeholder.
• Carregamentos ultrarrápidos (menos de 3 segundos): o piscar do placeholder é mais incômodo do que útil quando o conteúdo real aparece quase imediatamente. Em vez disso, não mostre nenhum estado de carregamento.
• Downloads ou carregamentos pesados de longa duração (mais de 10 segundos): quando existe informação real de progresso (porcentagem concluída), prefira uma barra de progresso em vez de um Skeleton, que não comunica quanto falta.

1. Surface: retângulo cuja largura, altura e raio de borda são definidos pelas props width, height e borderRadius, para aproximar a forma do conteúdo final. Uma animação integrada alterna sua cor de forma contínua, para comunicar que aquele espaço está carregando.

Combine vários Skeleton, cada um com as dimensões da parte de conteúdo que substitui, para antecipar a estrutura completa de um layout enquanto ele carrega. Uma forma circular (borderRadius="50%") representa uma imagem ou um avatar; uma forma retangular com raio baixo representa uma linha de texto ou um botão.

• Papel puramente visual: o Skeleton não é um elemento interativo nem focável; não deve receber foco de teclado nem conter texto real.
• Anunciar o estado de carregamento: o Skeleton não informa por si só que o conteúdo está carregando. Adicione aria-busy="true" (e, se for o caso, aria-live="polite") no contêiner que agrupa os placeholders, para que a tecnologia assistiva anuncie o estado de carregamento.
• Movimento reduzido: a animação de cor é contínua; se a equipe identificar a necessidade de respeitar prefers-reduced-motion, avalie limitar a duração do carregamento ou atenuar a animação por meio de estilos próprios, já que o componente não expõe uma prop para desativá-la.
• Duração limitada: substitua o Skeleton pelo conteúdo real (ou por uma mensagem de erro) assim que estiver disponível; não o deixe indefinidamente se o carregamento falhar.

Instale o componente via terminal.

As propriedades adicionais são repassadas ao elemento <Skeleton>. Consulte a documentação para ver a lista de atributos aceitos pelo elemento <Skeleton>.

• Spinner — Para comunicar que um processo está em andamento após uma ação do usuário, em vez de antecipar a forma de um conteúdo que está carregando.
• Input — Expõe seu próprio Input.Skeleton, já dimensionado para esse componente.
• Icon button — Expõe seu próprio IconButton.Skeleton, já dimensionado para esse componente.

Skeleton