Squad Front

Appearance

Loadings de Aplicação (Nível Global) ​

Loadings de aplicação ocorrem em momentos críticos onde o sistema inteiro está sendo preparado ou uma mudança de contexto massiva está acontecendo. Nestes casos, a interação do usuário é geralmente bloqueada até que o ambiente esteja pronto.

O que são? ​

São estados de carregamento que afetam a experiência como um todo:

  • Inicialização (Boot): Quando o usuário abre o app e estamos buscando permissões, tokens e configurações iniciais.
  • Troca de Perfil/Contexto: Quando um médico troca de unidade de saúde e precisamos recarregar todo o estado global.
  • Manutenção ou Atualização: Verificações de versão obrigatória.

Como pensar o Design? ​

Neste nível, o objetivo é transmitir estabilidade e profissionalismo. Como o usuário não pode fazer nada, o visual deve ser limpo e reforçar a marca.

1. Splash Screen ​

A primeira impressão. Deve conter o logo da empresa e, preferencialmente, um indicador de progresso discreto.

  • Use o logo centralizado.
  • Fundo em cor sólida (conforme Design Tokens).

2. Full Screen Loading (Tela de Transição) ​

Usado quando o app já abriu, mas uma ação global está processando.

  • Utilize um Spinner centralizado e de tamanho grande (Large).
  • Pode conter uma frase de apoio curta (ex: "Preparando seu consultório...").

Exemplos Práticos ​

✅ Como fazer ​

  • Feedback de Progresso: Em loadings que demoram mais de 2 segundos, use uma frase que explique o que está acontecendo.
  • Identidade Visual: Use cores da marca para os spinners globais.
  • Suavidade: Utilize transições de opacidade (fade-in) para que a tela não "pisque" ao carregar.

❌ Como não fazer ​

  • Bloqueio sem aviso: Deixar a tela branca ou preta sem nenhum indicador visual. O usuário vai achar que o app travou.
  • Spinners Infinitos: Se o loading falhar (timeout), sempre mostre uma tela de erro com opção de "Tentar Novamente". Nunca deixe o loading rodando para sempre.
  • Múltiplos Spinners: Nunca coloque dois spinners de tela cheia um sobre o outro.

O Impacto no Produto ​

Um bom loading de aplicação reduz a taxa de abandono (Churn) no primeiro acesso. Transmite a sensação de que o sistema é robusto e está "trabalhando" para o usuário.