Squad Front

Appearance

Loadings de Tela (Nível de Interface) ​

Loadings de tela (ou componentes) são feedbacks visuais rápidos aplicados a elementos específicos da interface. Eles informam que uma interação pequena está sendo processada sem interromper o fluxo do usuário na página.

O que são? ​

São estados de carregamento granulares:

  • Botões com Loading: Ao clicar em "Entrar" ou "Enviar".
  • Inputs com Busca: Quando um campo de endereço busca o CEP automaticamente.
  • Pequenos Cards: Atualização de um contador de notificações.

Como pensar o Design? ​

O design para loadings de tela deve ser minimalista e integrado. Ele substitui ou complementa o estado visual do componente original.

1. Botões (Button Loading State) ​

A regra de ouro: Nunca mude o tamanho do botão quando ele entrar em loading.

  • O texto do botão deve ser ocultado (ou mantido com baixa opacidade).
  • Um Spinner pequeno (Small) deve aparecer centralizado.
  • O botão deve ser desabilitado (disabled) para evitar múltiplos cliques.

2. Micro-Skeletons ​

Para pequenos blocos de informação (ex: o nome do usuário no Header).

  • Use uma barra cinza animada com o mesmo tamanho da fonte esperada.

3. Inline Loaders ​

Pequenos spinners ao lado de um texto ou dentro de um campo de busca.

  • Use para feedbacks que não bloqueiam nenhuma ação (ex: "Verificando disponibilidade...").

Exemplos Práticos ​

✅ Como fazer ​

  • Manter Dimensões: Se o botão diz "Salvar Alterações", o spinner deve ocupar o espaço central sem fazer o botão encolher.
  • Feedback de Busca: Mostrar um spinner dentro do trailing slot de um Input enquanto a API de busca é consultada.
  • Contraste: O spinner dentro de um botão primário (azul) deve ser branco para garantir visibilidade.

❌ Como não fazer ​

  • Deslocamento de Layout: Adicionar um spinner que empurra os outros elementos da tela para o lado.
  • Múltiplos Loadings em Botões: Se o usuário clicou em um botão, os outros botões relacionados (ex: "Cancelar") devem ser desabilitados, mas não precisam necessariamente mostrar um spinner.
  • Spinners Coloridos em Excesso: No nível de tela, prefira spinners neutros ou que sigam estritamente o contraste do componente pai.

O Impacto no Produto ​

Tratar loadings ao nível de componente evita a sensação de que o sistema é "pesado". Quando apenas o botão carrega, o usuário sente que o resto do sistema continua disponível e responsivo, melhorando a percepção de agilidade.