Contexto
Um estado de carregamento informa que a interface está processando algo. Sem esse retorno, uma tela vazia pode parecer quebrada e uma ação pode parecer não ter funcionado. Skeleton, spinner, loading de página, progresso e carregamento progressivo resolvem situações diferentes; a escolha deve considerar o que está carregando, quanto tempo pode levar e se a pessoa ainda pode interagir.
Antes de escolher um indicador, identifique o escopo do carregamento, a previsibilidade da estrutura, a duração esperada e se existe progresso mensurável.
Escolha o padrão pelo contexto
- Skeleton: use na carga inicial de listas, cards, tabelas ou áreas cujo formato já é conhecido. Reproduza a estrutura aproximada do conteúdo final.
- Spinner ou loading inline: use em ações assíncronas curtas, como salvar, atualizar, pesquisar ou enviar. Posicione o retorno perto do alvo afetado e evite acionamentos repetidos.
- Loading de página ou sobreposição: use apenas quando a página ou uma área crítica estiver realmente bloqueada. Preserve o contexto sempre que a interação parcial for segura.
- Barra ou indicador de progresso: use em tarefas longas quando for possível medir etapas ou percentual. Mostre progresso determinado somente com dados reais; caso contrário, use estado indeterminado.
- Carregamento progressivo: use em páginas lentas, dashboards, filtros ou fontes múltiplas. Apresente primeiro a estrutura e depois os dados, sem apagar o contexto já disponível.
Em esperas longas, informe o estado atual, indique o que a pessoa pode esperar e ofereça cancelamento, recuperação, tentativa novamente ou uma saída quando isso fizer sentido. Valide a escolha com o tempo real da tarefa e com testes de uso.
Porque isso importa?
Uma espera sem retorno aumenta a incerteza: a pessoa pode interpretar a interface como travada, repetir o clique ou abandonar a tarefa. Um indicador ajuda, mas o padrão errado também cria problemas: um spinner em uma página inteira esconde a estrutura, um skeleton em um controle não explica uma ação e uma porcentagem inventada cria uma expectativa falsa.
Em benchmarks de comércio eletrônico, a Baymard observou ansiedade e repetição de ações durante esperas de alguns segundos, reforçando a necessidade de comunicar que o processo continua e impedir submissões duplicadas. Carbon, Shopify Polaris e Design System GOV.BR convergem na distinção entre skeleton para conteúdo, loading/spinner para processamento e progresso para operações longas ou mensuráveis. A orientação do W3C/WAI acrescenta que o estado precisa ser exposto programaticamente, não apenas animado visualmente.
Base da recomendação
Esta recomendação cruza benchmark de UX da Baymard, documentação de Carbon, Shopify Polaris e GOV.BR, orientação normativa do W3C/WAI sobre mensagens de status e referências de teste e medição da MeasuringU. A evidência é classificada como moderada: há convergência consistente sobre feedback, escopo, acessibilidade e prevenção de ações duplicadas, mas não existe um limite de tempo universal nem um componente obrigatório para todos os produtos. Os valores de 0,1, 1 e 10 segundos associados à Nielsen Norman Group são uma heurística histórica sobre resposta, não uma regra para escolher o loader.
Quando usar?
- Use skeleton quando o formato do conteúdo é conhecido e a área está em carga inicial.
- Use spinner ou loading inline para uma ação curta ou atualização localizada.
- Use loading de página somente quando a tela inteira estiver bloqueada.
- Use progresso determinado quando o percentual ou as etapas forem mensuráveis.
- Use progresso indeterminado quando a espera existe, mas a duração não é conhecida.
- Use carregamento progressivo em páginas lentas, dashboards e múltiplas fontes.
- Adicione status, erro, timeout ou tentativa novamente quando a espera for longa.
Quando evitar?
- Não use skeleton em botões, campos, menus, modais ou toasts.
- Não use spinner de página para uma área pequena.
- Não mostre percentual sem uma medição real.
- Não empilhe vários indicadores concorrentes.
- Não bloqueie a interface inteira sem necessidade.
- Não deixe um spinner indefinido sem status, erro ou saída.
- Não dependa apenas de movimento ou cor para comunicar o estado.
Recomendações
Faça
- Identifique o que está carregando.
- Escolha o padrão pelo contexto.
- Preserve o layout quando possível.
- Mostre progresso real.
- Aproxime o indicador do alvo.
- Evite ações duplicadas.
- Anuncie o estado à tecnologia assistiva.
- Teste duração e recuperação.
Evite
- Usar spinner para a página inteira.
- Desenhar skeleton em controles.
- Simular percentual.
- Empilhar loaders.
- Bloquear sem necessidade.
- Deixar a espera sem saída.
- Depender só de animação.
