Um Guia Rápido sobre Indicadores de Carregamento em Aplicações Web
Seus usuários clicaram em um botão. Algo está acontecendo—mas o quê? Sem feedback claro, eles assumirão o pior: a aplicação está quebrada, a ação falhou ou precisam clicar novamente. Indicadores de carregamento resolvem isso, mas a abordagem errada cria novos problemas.
Este guia aborda a UX moderna de indicadores de carregamento, desde a escolha do padrão correto até a implementação de estados de carregamento com React Suspense e as convenções loading.tsx do Next.js App Router—mantendo o INP Core Web Vitals saudável.
Pontos-Chave
- Spinners globais bloqueiam a interação e prejudicam tanto a experiência do usuário quanto as pontuações INP—use feedback localizado e progressivo.
- Combine o indicador à situação: spinners para esperas breves, skeletons para carregamento de conteúdo, barras de progresso para operações mensuráveis e UI otimista para ações com sensação instantânea.
- Boundaries do React Suspense e
loading.tsxdo Next.js permitem estados de carregamento com escopo de segmento que deixam os usuários interagirem com partes não afetadas da sua aplicação. - Acessibilidade é inegociável: use
aria-busy, live regions e respeite as preferências de movimento reduzido.
Por Que Spinners Globais Geralmente Estão Errados
Spinners de página inteira bloqueiam tudo. Os usuários não conseguem ler conteúdo, navegar para outro lugar ou fazer qualquer coisa produtiva. Pior ainda, eles prejudicam a performance percebida mesmo quando os tempos reais de carregamento são razoáveis.
A abordagem moderna: feedback localizado e progressivo. Mostre estados de carregamento apenas onde o conteúdo está realmente carregando. Deixe os usuários interagirem com todo o resto.
Isso é importante para o INP (Interaction to Next Paint), o Core Web Vital que mede responsividade. Overlays de carregamento globais que bloqueiam a interação podem impactar negativamente suas pontuações INP. Indicadores localizados mantêm o restante da sua UI responsiva.
Escolhendo o Indicador Correto
Situações diferentes exigem padrões diferentes:
Spinners
Melhores para esperas breves e indeterminadas de até 3 segundos. Use-os inline—dentro de botões, próximo a campos de formulário ou dentro de pequenas áreas de conteúdo. Evite centralizar um spinner em uma tela vazia.
Skeleton Screens
Ideais para carregamentos iniciais de página ou seções de conteúdo. Skeletons mostram a forma do conteúdo que está chegando, reduzindo o tempo de espera percebido e prevenindo mudanças de layout. Funcionam especialmente bem para listas, cards e áreas com muito texto.
Barras de Progresso
Reserve-as para processos determinados: uploads de arquivos, operações de múltiplas etapas ou qualquer coisa onde você possa calcular o progresso real. Barras de progresso falsas que não refletem a realidade frustram os usuários mais do que spinners honestos.
UI Otimista
Para ações como salvar, curtir ou alternar, atualize a UI imediatamente e reconcilie com o servidor depois. Os usuários percebem responsividade instantânea. Trate falhas graciosamente com rollback e estados de erro claros.
Padrões de Framework Que Funcionam
Estados de Carregamento com React Suspense
Os boundaries do Suspense do React permitem declarar UI de carregamento de forma declarativa. Envolva componentes assíncronos em <Suspense> com um fallback, e o React cuida do resto. O React 19 melhora isso ainda mais ao tornar transições assíncronas e estados de UI pendentes de primeira classe, reduzindo o jank visual ao navegar entre estados.
A percepção chave: aninhe boundaries do Suspense estrategicamente. Um único boundary de nível superior fornece um spinner global—exatamente o que você está tentando evitar. Múltiplos boundaries granulares permitem que diferentes seções carreguem independentemente.
loading.tsx do Next.js App Router
A convenção loading.tsx do App Router fornece UI de carregamento automática por segmento de rota. Coloque um arquivo loading.tsx em qualquer pasta de rota, e o Next.js o exibe enquanto aquele segmento carrega.
Detalhe crítico: isso tem escopo de segmento, não é um loader global universal. Cada segmento de rota pode ter seu próprio estado de carregamento. Um loading.tsx em /dashboard afeta apenas o segmento do dashboard, não toda a estrutura da aplicação.
Isso combina naturalmente com streaming SSR—o conteúdo renderiza progressivamente à medida que os dados ficam disponíveis, com loading.tsx preenchendo as lacunas.
Discover how at OpenReplay.com.
View Transitions API
Para mudanças de página e rota, a View Transitions API é cada vez mais uma alternativa viável aos spinners de carregamento tradicionais. Em vez de mostrar um loader enquanto a próxima página se prepara, o navegador pode animar suavemente entre estados. Isso parece mais rápido mesmo quando os tempos reais de carregamento são similares.
A API funciona entre frameworks e fornece hooks CSS para personalizar animações de transição. É particularmente eficaz para navegações same-origin onde você controla ambas as páginas.
Requisitos de Acessibilidade
Indicadores de carregamento devem funcionar para todos:
aria-busy="true": Aplique a contêineres cujo conteúdo está carregando. Leitores de tela anunciam o estado ocupado.role="status"com live regions: Para mensagens de carregamento que devem ser anunciadas. Usearia-live="polite"para evitar interromper os usuários.- Movimento reduzido: Respeite
prefers-reduced-motion. Substitua animações giratórias por indicadores estáticos ou mudanças sutis de opacidade. - Nunca confie apenas em elementos visuais: Combine indicadores animados com rótulos de texto ou anúncios ARIA. “Carregando seu dashboard…” é melhor que um spinner silencioso.
Erros Comuns
Mostrar loaders para operações rápidas: Se algo é concluído em menos de 100ms, um indicador de carregamento cria flicker. Faça debounce dos seus estados de carregamento—mostre-os apenas após um breve atraso.
Bloquear interatividade desnecessariamente: A menos que uma ação genuinamente exija espera (como uma confirmação de pagamento), deixe os usuários continuarem usando a aplicação.
Barras de progresso enganosas: Uma barra de progresso travada em 99% por dois minutos destrói a confiança. Se você não pode medir o progresso real, use um indicador indeterminado.
Ocultar conteúdo já carregado: Ao atualizar dados, mostre conteúdo desatualizado com um indicador de atualização sutil em vez de substituir tudo por um skeleton.
Conclusão
Uma boa UX de indicador de carregamento se resume a honestidade e localidade. Diga aos usuários o que está acontecendo, onde está acontecendo, e deixe-os fazer todo o resto. Padrões modernos como estados de carregamento com React Suspense, loading.tsx do Next.js App Router e a View Transitions API tornam isso mais fácil do que nunca—mantendo seu INP Core Web Vitals sob controle.
Comece auditando seus estados de carregamento atuais. Substitua bloqueadores globais por feedback localizado. Seus usuários—e suas métricas de performance—agradecerão.
Perguntas Frequentes
Use skeleton screens ao carregar conteúdo com layout previsível, como listas, cards ou blocos de texto. Skeletons reduzem o tempo de espera percebido ao mostrar a forma do conteúdo que está chegando. Spinners funcionam melhor para esperas breves e imprevisíveis ou feedback inline dentro de botões e campos de formulário.
Adicione um pequeno atraso antes de mostrar o indicador de carregamento, tipicamente 100 a 200 milissegundos. Se a operação for concluída antes do atraso expirar, pule o indicador completamente. Isso previne flicker incômodo enquanto ainda fornece feedback para operações genuinamente lentas.
Não. O arquivo loading.tsx tem escopo de segmento, o que significa que afeta apenas o segmento de rota onde é colocado. Um loading.tsx na pasta dashboard só é exibido enquanto aquele segmento carrega. O restante da estrutura da sua aplicação permanece interativo e não afetado.
Aplique aria-busy true a contêineres com conteúdo carregando. Use role status com aria-live polite para mensagens de carregamento que devem ser anunciadas. Sempre combine indicadores visuais com rótulos de texto ou anúncios ARIA para que usuários que não podem ver animações ainda recebam feedback.
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.
