Feedback assíncrono: por que trocar spinners genéricos por skeleton screens

Dois sistemas demoram exatamente o mesmo tempo para carregar uma lista. No primeiro, aparece um círculo girando no meio da tela branca. No segundo, aparecem blocos cinza no formato dos itens, pulsando suavemente, e o conteúdo surge no lugar deles. A maioria das pessoas jura que o segundo é mais rápido.

Por que funciona

O skeleton screen antecipa a estrutura do conteúdo. O cérebro começa a "ler" a página antes dos dados chegarem, e a espera parece menor. O spinner, ao contrário, não dá nenhuma pista do que vem — só lembra que você está esperando.

Bônus: zero layout shift

Um skeleton com as mesmas dimensões do conteúdo final reserva o espaço. Quando os dados chegam, nada pula na tela — o que protege o CLS, métrica do Google explicada em CLS: por que o seu site "pula" enquanto carrega e como parar com isso.

Como fazer bem

<div class="animate-pulse space-y-3">
  <div class="h-4 w-1/3 rounded-full bg-white/10"></div>
  <div class="h-4 w-full rounded-full bg-white/10"></div>
  <div class="h-4 w-4/5 rounded-full bg-white/10"></div>
</div>

• Reproduza o formato real: avatar redondo onde haverá avatar, linhas onde haverá texto.
• Use uma animação discreta (animate-pulse ou shimmer) e respeite quem desativa movimento (prefers-reduced-motion: animação com respeito a quem sente desconforto).
• Mostre conteúdo assim que cada parte chegar; não espere tudo.

Quando o spinner ainda faz sentido

Ações curtas e pontuais — salvar, enviar um formulário — pedem um indicador dentro do próprio botão, não um skeleton. O botão desabilitado com um pequeno spinner deixa claro que a ação foi registrada e evita cliques duplos.

Também no app

No React Native, o mesmo princípio vale com shimmer nativo — mostramos em Skeleton e shimmer no React Native: carregamento que parece rápido.

Parte de algo maior

Skeleton é uma peça do sistema de feedback do produto, junto com micro-interações (Micro-interações que convertem: como transições de 200ms a 300ms impactam a retenção do usuário) e estados de erro bem desenhados (Estados vazios e de erro: as telas que ninguém desenha (e todo usuário vê)).

Todos os sistemas e sites da We Codex usam esse padrão. Veja sistemas web ou fale com a gente.