Contexto
Skeleton screen é um placeholder que reproduz, de forma simplificada, a estrutura do conteúdo enquanto os dados carregam. Ele pode dar à pessoa um modelo mental do que aparecerá e tornar uma espera moderada mais compreensível, mas não reduz o tempo real de carregamento.
A decisão depende do contexto: skeleton costuma funcionar melhor em carregamentos de página ou de grandes áreas com estrutura conhecida; um spinner pode ser mais adequado para uma ação curta ou um módulo isolado; uma barra de progresso é mais apropriada quando o processo tem avanço mensurável. A recomendação abaixo combina pesquisa de UX, acessibilidade e orientações de Design Systems, sem tratar um padrão visual isolado como regra universal.
Use skeleton quando houver uma espera perceptível e a forma, a hierarquia e o tamanho aproximado do conteúdo forem previsíveis. Faça o placeholder corresponder ao layout final, reserve o espaço dos elementos e troque-o pelo conteúdo assim que os dados estiverem prontos.
Para carregamentos rápidos, evite mostrar um estado que pisca. Para processos com progresso conhecido, use uma indicação determinada. Para conteúdo desconhecido, uma área que muda muito ou uma ação localizada, prefira um indicador adequado ao escopo da operação.
Porque isso importa?
Uma tela vazia não informa se o sistema está trabalhando, enquanto um skeleton bem construído antecipa a estrutura e ajuda a pessoa a interpretar a espera. Porém, um placeholder impreciso, animado por tempo demais ou mantido depois da falha pode aumentar a frustração e criar uma falsa sensação de desempenho.
O benefício é principalmente perceptivo e depende da execução. O tempo real de resposta, a estabilidade do layout e a recuperação de erros continuam sendo responsabilidades do produto.
Quando usar?
- O conteúdo final tem estrutura previsível.
- A espera é suficiente para justificar um estado intermediário.
- O placeholder consegue reservar o espaço do conteúdo.
- A página ou área permanece reconhecível durante o carregamento.
- A transição para o conteúdo final não provoca salto visual.
- O estado pode ser interrompido ou substituído por erro, vazio ou sucesso.
Quando evitar?
- A resposta costuma ser imediata.
- O conteúdo pode assumir formas muito diferentes.
- O processo tem progresso mensurável, como upload ou exportação.
- O skeleton ocuparia só um pequeno controle ou ação momentânea.
- O placeholder esconderia uma falha ou um estado vazio.
- A animação causaria distração ou desconforto.
Recomendações
Faça
- Reproduza o layout final.
- Reserve o espaço.
- Mostre o estado no escopo certo.
- Use movimento com moderação.
- Remova o placeholder ao concluir.
- Meça o tempo real e a percepção.
Evite
- Não use por padrão.
- Não simule progresso.
- Não deixe a tela vazia.
- Não pulse sem fim.
- Não esconda falhas.
- Não trate skeleton como otimização.
