Estados de Carregamento do Menu: Skeleton vs Spinner — Melhores Práticas

Um café universitário de 14 mesas em Bursa Görükle reduziu a taxa de rejeição mobile de 18% para 11% trocando o spinner por um shimmer-skeleton no menu digital. Mesmos dados, mesmas imagens, mesma rede 3G.

Estudo Nielsen Norman 2023

A pesquisa Nielsen Norman Group 2023 revela que skeleton screens reduzem o tempo de carregamento percebido em 38%, enquanto spinners clássicos aumentam em 12%. O cérebro aceita melhor uma estrutura esboçada que um vazio animado.

Para um menu de restaurante é decisivo. O cliente está sentado, telefone na mão, quer decidir rápido. Dois segundos de tela branca geram dúvida — "está sem rede?". O skeleton elimina essa dúvida.

Padrão thMenu: shimmer-skeleton

thMenu usa animação CSS gradient shimmer para cards de produto, abas de categoria e placeholders de imagem. Durante o carregamento de imagens mantém um blur-up placeholder mais o quadro skeleton.

• Abas de categoria: 5 pills cinzas, shimmer 1,5s
• Card de produto: imagem + 2 linhas de texto + preço
• Cart drawer: linhas skeleton em vez de spinner

Quando usar spinner?

Para confirmação de ação — "Enviando pedido", "Processando pagamento", "Chamando garçom" — um spinner inline pequeno é melhor. Aqui espera-se um resultado, não conteúdo.

Regra: skeleton para dados, spinner para ações. thMenu mostra spinner inline em 200ms após tap "Adicionar ao carrinho", depois toast de sucesso.

FAQ

Animação skeleton lenta atrapalha? Sim. Ciclos acima de 2 segundos irritam. Ideal: 1,2-1,8s; thMenu usa 1,5s.

Skeleton basta em redes péssimas? Skeleton + toast após 8+ segundos + service worker offline fallback.

Skeleton é acessível? Sim com aria-busy="true" e aria-label="Carregando menu".

Achou útil? Compartilhe.