Sistema de Estado Esqueleto

O que Sistema de Estado Esqueleto faz?

Propósito

O Sistema de Estado Esqueleto fornece uma metodologia para projetar o estado de "carregamento" de uma interface. Ao contrário de spinners genéricos ou barras de progresso, os esqueletos aproximam o layout final usando "ossos" (formas de baixa fidelidade), o que reduz o tempo de espera percebido pelo usuário e previne o Cumulative Layout Shift (CLS) ao reservar o espaço necessário antes do conteúdo chegar.

Casos de Uso

• Painéis Densos em Dados: Onde múltiplos widgets carregam em velocidades diferentes.
• Feeds de Conteúdo: Rolando listas de artigos, produtos ou posts sociais.
• Grades com Muitas Imagens: Reservando espaço para imagens de alta resolução para evitar que a página "pule".
• Visualizações de Busca e Filtros: Fornecendo feedback imediato de que o sistema está processando uma consulta.
• Aplicações de Página Única (SPAs): Gerenciando transições entre rotas onde os dados são buscados de forma assíncrona.

Quando NÃO Usar

• Interações Instantâneas: Se o conteúdo carrega em menos de 300ms, um esqueleto pode causar um "flicker" perturbador.
• Cargas Simples e de Baixo Contexto: Para elementos pequenos como um único botão ou uma pequena tag, um spinner padrão ou texto "Carregando..." é mais apropriado.
• Conteúdo Estático: Conteúdo que é hard-coded ou cacheado e renderiza imediatamente.
• Dados em Tempo Real de Alta Velocidade: Se os dados mudam tão rápido que o esqueleto estaria constantemente aparecendo e desaparecendo, pode causar fadiga visual.

Entradas

1. Layout Alvo: O design "totalmente carregado" final do componente ou página.
2. Variáveis de Conteúdo: Quais partes da interface são dinâmicas (Texto, Imagens, Preços, Avatares)?
3. Dimensões Espaciais: A altura, largura e proporções exatas dos elementos finais.
4. Tom da Marca: As cores primária e secundária usadas para a base do "osso" e o efeito shimmer.

Saídas

1. Blueprint do Esqueleto: Um mapa de baixa fidelidade mostrando o arranjo dos ossos.
2. Especificação de Ossos: Definições para forma (círculos vs. retângulos) e dimensionamento (fixo vs. baseado em porcentagem).
3. Estratégia de Transição: Regras para como o esqueleto desaparece e o conteúdo aparece.
4. Requisitos de Acessibilidade: Orientação para implementação de aria-busy e aria-hidden.

Fluxo de Trabalho

1. Mapeie a Geometria "Alvo"

Decomponha o componente final em seus primitivos geométricos básicos:

• Círculos: Para avatares, ícones ou botões arredondados.
• Retângulos (Arredondados): Para cartões, contêineres de imagem e blocos de texto.
• Linhas: Para linhas únicas de texto (títulos, metadados).

2. Defina a Hierarquia de Ossos

Nem todo elemento precisa de um osso. Foco nas "âncoras" estruturais:

• Osso Primário: O maior elemento visual (ex.: uma imagem de produto).
• Ossos Secundários: Títulos e metadados principais.
• Ossos Terciários: Pequenos meta-detalhes ou botões de ação (muitas vezes podem ser omitidos se forem muito pequenos).

3. Estabeleça a Correspondência Espacial (A Regra do CLS)

Garanta que as dimensões do esqueleto correspondam exatamente ao contêiner do conteúdo final:

• Proporção de Aspecto: Use proporções de aspecto fixas (ex.: 16:9 para vídeos) para o osso, de modo que ele não mude de tamanho quando o ativo carregar.
• Dimensionamento de Texto: Use ossos que correspondam à altura da linha e à largura aproximada do texto que representam.

4. Projete o Ritmo e o Shimmer

Esqueletos devem parecer "vivos", mas não perturbadores:

• Cor Base: Use uma cor neutra de baixo contraste (ex.: Cinza Claro).
• Shimmer (O Pulso): Aplique uma animação de gradiente sutil que se move da esquerda para a direita.
• Sincronização: Se vários esqueletos estiverem na tela, garanta que suas animações estejam sincronizadas para evitar caos visual.
• Movimento Reduzido: Envolva a animação do shimmer keyframe em uma consulta @media (prefers-reduced-motion: reduce) que desabilita o movimento e cai para um osso estático ou com pulsação suave de opacidade.

5. Defina a Transição de "Entrega"

Planeje a saída do esqueleto:

• Timing: Use um fade-in curto (ex.: 200ms) para o conteúdo real, evitando uma transição brusca do tipo "snap".
• Escalonamento: Para listas, decida se os itens devem aparecer todos de uma vez ou conforme carregam individualmente.

Regras de Decisão

• A Regra dos 300ms: Mostre um esqueleto apenas se o carregamento for esperado para durar mais de 300ms.
• Precisão do Osso: Um osso deve representar o contêiner, não os dados específicos. Por exemplo, um osso de texto deve ser uma barra simples, não uma linha irregular imitando letras específicas.
• Contagem de Linhas: Para texto com várias linhas, use 2 ou 3 ossos de larguras variadas (ex.: a última linha com 60% de largura) para simular o fluxo natural de parágrafos.
• Spinner vs. Esqueleto:
  • Use um Esqueleto para transições no nível da página ou seção.
  • Use um Spinner para ações pequenas e localizadas (como um estado de botão "Salvando...").

Restrições

• Acessibilidade: Esqueletos devem ser marcados com aria-hidden="true" para que leitores de tela não tentem "ler" as barras vazias. O contêiner pai deve usar aria-busy="true" durante o carregamento e, idealmente, conter uma região aria-live="polite" visualmente oculta que anuncie "Carregando" e depois o estado de conclusão assim que o conteúdo substituir o esqueleto — não use aria-live nos próprios ossos do esqueleto. Respeite prefers-reduced-motion para o efeito shimmer.
• Contraste: As cores do esqueleto devem ser distintas do fundo, mas não tão contrastantes a ponto de parecerem conteúdo ativo.
• Responsividade: Os ossos do esqueleto devem escalar usando a mesma lógica de grid/flex do conteúdo final.

Padrões Comuns de Falha

• O "Salto CLS": Um esqueleto de 200px de altura sendo substituído por conteúdo de 300px de altura, fazendo a página "pular".
• Sobrecarga de Shimmer: Animações muito rápidas ou de alto contraste, causando enjoo ou distração.
• Incompatibilidade Conteúdo-Ossos: Usar um osso circular para uma imagem quadrada, ou vice-versa.
• Complexidade Excessiva: Tentar recriar cada ícone minúsculo como um osso, resultando em um layout "fantasma" poluído.
• O "Esqueleto Estático": Um esqueleto sem animação, que pode ser confundido com uma página quebrada ou vazia.

Critérios de Validação

• Dimensões do esqueleto correspondem exatamente ao estado final "carregado" (CLS zero).
• Proporções de aspecto para imagens/vídeos são reservadas usando contêineres fixos.
• A animação shimmer é sutil e se move da esquerda para a direita.
• Áreas com muito texto usam ossos que simulam comprimentos naturais de linha.
• aria-hidden="true" é aplicado aos elementos do esqueleto, e o contêiner de carregamento usa aria-busy="true".
• A animação shimmer respeita prefers-reduced-motion: reduce.
• A transição do esqueleto para o conteúdo é um fade suave (aproximadamente 200ms).
• O esqueleto não aparece para carregamentos mais rápidos que 300ms.