Os estados de carregamento existem para responder a uma pergunta do usuário: está acontecendo alguma coisa? Sem resposta, as pessoas tocam novamente, recarregam a página ou saem. A resposta certa depende de quanto tempo eles esperam.
Para esperas muito curtas, menos de um décimo de segundo, a maioria das pessoas não percebe um atraso, então um indicador apenas adiciona cintilação. Uma técnica comum é esperar um pouco antes de mostrar um botão giratório, para que respostas rápidas nunca mostrem nenhum.
Para esperas de um ou alguns segundos, mostre o feedback onde o resultado aparecerá. Uma tela de esqueleto, um contorno cinza do próximo layout, funciona bem para listas, cartões e perfis porque mostra o que está por vir e reduz a mudança de layout. Um spinner funciona para áreas pequenas ou quando o resultado não tem formato previsível.
Para tarefas longas, como uploads, exportações ou geração de IA, mostre o progresso real se puder medi-lo, explique o que está acontecendo e deixe as pessoas cancelarem ou continuarem com outro trabalho. Um botão giratório que gira por um minuto sem nenhuma outra informação parece um fracasso.
O controle que iniciou a ação também precisa de um estado. Um botão de envio que muda para um estado de carregamento e não pode ser pressionado duas vezes evita pedidos e mensagens duplicadas. Quando o carregamento terminar, mova-se claramente para o sucesso ou erro, em vez de retornar silenciosamente ao padrão.
A animação ajuda aqui, mas mantenha-a calma e curta e respeite a configuração de movimento reduzido. ExodeUI, que criamos, permite projetar um carregador ou botão com estados de carregamento, sucesso e erro em um arquivo entre o qual seu código alterna.