Estados de download e espera

1) Por que controlar a espera

• (1) que a ação começou, (2) quanto tempo vai demorar e (3) o que fazer se algo correr mal.
• O bom estado de carregamento reduz a ansiedade, mantém o foco e economiza tempo.

2) Seleção de pattern: skeleton, progress, spinner, streaming

Skeleton - quando a estrutura do conteúdo futuro é conhecida, mas não há dados. Impede CLS.
Progress bar (determinado) - Quando se conhece o volume ou as etapas (por exemplo, apload, KYC).
Indeterminate progress - Quando a duração é desconhecida, mas o processo é real (inicialização).
Spinner - apenas como um indicador curto de até 600-800 ms; a seguir, skeleton/progresso/texto.
Streaming/partital render - Forneça os dados em partes (SSR/segmentos) e mostre as zonas prontas imediatamente.

Regra: não deixe o usuário em branco. Se tiver mais de 1 c, dê estrutura e sentido.

3) Liminares e orçamentos temporários (indicações)

100 ms - resposta visual instantânea: «busy» no botão/campo.
≤ 1000 ms - skeleton/indicador + texto «Baixar»....

4) Micro-pattern de resposta instantânea

Transferindo o controlador para 'busy' imediatamente (animação ≤ 100 ms), bloqueando os cliques repetidos.
Mudamos o texto do botão para «Enviando»..., e mostramos o brinde «Pedido aceito» (opcional).
Quando o foco é voltado para o campo, o skeleton local está na área de resultados.

5) Skeleton sem «corrida»

Desenhe 1:1 forma de conteúdo futuro: altura de blocos, proporções de mídia ('aspect-ratio').
Animação shimmer: 1200-1600 ms, amplitude de brilho ≤ 20%, sem versos.
As grandes listas incluem a virtualização + limitação do número de esqueletos no DOM.

css
.skeleton{position:relative; background:var(--bg-elevated); border-radius:12px; overflow:hidden}
.skeleton::after{
content:"";position:absolute; inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
animation:shimmer 1. 4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

6) Progresso e etapas