Skeleton screens vs spinners: quando cada um vence
A escolha entre skeleton screens e spinners muda a percepção de velocidade do usuário — mesmo sem alterar o tempo real de carregamento.
O que a pesquisa diz sobre tempo percebido
Estudos de UX mostram consistentemente que usuários subestimam o tempo de espera quando o feedback é progressivo — ou seja, quando veem estrutura sendo preenchida em vez de um indicador abstrato girando. Skeleton screens exploram esse viés cognitivo.
Um spinner diz "aguarde, algo está acontecendo". Um skeleton screen diz "aqui está o que você vai ver, e ele está chegando". Essa distinção é sutil, mas significativa para a tolerância à espera.
Quando usar skeleton screens
Skeletons ganham em qualquer UI com estrutura previsível: feeds de conteúdo, cards de produto, tabelas de dados, sidebars, perfis de usuário. O usuário sabe o que esperar e o skeleton configura essa expectativa corretamente.
O critério principal é: a UI tem forma e layout estáveis antes de os dados chegarem? Se sim, use skeleton. Se o layout muda completamente dependendo do conteúdo (ex: zero results vs. lista longa), o skeleton pode criar uma expectativa falsa.
function ArticleCardSkeleton() {
return (
<div className="glass rounded-2xl p-6 animate-pulse">
<div className="h-3 w-20 rounded bg-white/10 mb-4" />
<div className="h-5 w-3/4 rounded bg-white/10 mb-2" />
<div className="h-4 w-full rounded bg-white/8 mb-1" />
<div className="h-4 w-2/3 rounded bg-white/8" />
</div>
)
}Quando spinners ainda fazem sentido
Ações pontuais — submit de formulário, exportação de arquivo, autenticação — não têm estrutura de UI para preencher. Um spinner contextualizado no botão ("Enviando...") comunica melhor que um skeleton aqui.
A regra de ouro: se a ação leva menos de 1 segundo, nenhum feedback visual é necessário. Entre 1 e 3 segundos, feedback inline no elemento ativado. Acima de 3 segundos, considere skeleton ou progress bar com porcentagem estimada.
Dica
Optimistic UI é superior a ambos para muitas ações: aplique a mudança imediatamente na interface e reverta em caso de erro. O usuário percebe a ação como instantânea.
Portodev Studio
Consultoria e engenharia digital · Ago 2026
Continue lendo
Performance12 min de leitura · Set 2026
Medindo Core Web Vitals em produção com React
Instrumentar métricas reais de usuário vai muito além de rodar o Lighthouse localmente. Veja como coletar LCP, CLS e INP diretamente do campo.
Ler o artigo
Para quem decide7 min de leitura · Out 2026
Quanto custa um site lento (e como descobrir no seu caso)
Lentidão não aparece no extrato, mas aparece no funil: visita que desiste antes de carregar, formulário que não é enviado, anúncio pago que leva a uma tela em branco. Veja como medir o custo no seu site.
Ler o guia
Para quem decide8 min de leitura · Out 2026
GEO: como fazer sua empresa aparecer nas respostas do ChatGPT
Cada vez mais gente pergunta a um assistente de IA antes de procurar no Google. GEO é o trabalho para sua empresa ser entendida, lembrada e citada nessas respostas. Veja o que já dá para fazer.
Ler o guiaEsses padrões no seu produto.
Em 30 minutos mapeamos como esses conceitos se aplicam ao contexto do seu projeto real.