Loadings de Funcionalidade (Nível de Negócio)
Loadings de funcionalidade ocorrem quando o usuário está realizando uma ação específica dentro de um fluxo de negócio. O sistema não está bloqueado inteiramente, mas aquela funcionalidade precisa de tempo para processar dados.
O que são?
São estados de carregamento vinculados a regras de negócio e transições de dados:
- Carregamento de Listas/Tabelas: Ao entrar na tela de "Lista de Pacientes".
- Processamento de Ação (Salvar): Quando o usuário clica em "Finalizar Atendimento" e o sistema processa a regra de negócio.
- Geração de Documentos: Criação de PDFs de receitas ou laudos.
Como pensar o Design?
O design aqui deve focar em continuidade. O usuário deve sentir que o sistema é rápido e que os dados estão "quase lá".
1. Skeleton Screens (Obrigatório para Tabelas e Listas)
Em vez de spinners genéricos, use Skeletons que mimetizam a estrutura real dos dados que serão exibidos.
- Benefício: Reduz a percepção de tempo de espera.
- Regra: O skeleton deve ter a mesma altura e layout aproximado dos itens reais.
2. Loading de Seção (Section Loading)
Usado quando apenas uma parte da tela está carregando (ex: um gráfico específico num Dashboard).
- Use um Spinner médio centralizado dentro do container da seção.
3. Overlay de Processamento (Blocking Feature)
Para ações de "Salvar" ou "Deletar", use um overlay translúcido sobre a área da funcionalidade.
- Impede cliques duplos que podem gerar erros de duplicidade no banco de dados.
Exemplos Práticos
✅ Como fazer
- Skeleton Animado: Adicione uma animação de "shimmer" (brilho deslizando) ao skeleton para indicar que o carregamento está ativo.
- Tabelas: Mostre pelo menos 3 a 5 linhas de skeleton na tabela para preencher o espaço visual.
- Contexto: "Salvando prescrição médica..." acima do indicador de carregamento.
❌ Como não fazer
- Spinner no centro de uma tabela vazia: Isso causa um "pulo" visual quando os dados chegam. Use Skeleton.
- Interromper o usuário desnecessariamente: Se for um salvamento em background (autosave), não bloqueie a tela.
- Skeletons estáticos: Um skeleton sem animação parece um erro de renderização ou uma imagem que não carregou.
O Impacto no Produto
O uso de Skeletons transforma a percepção de performance. Estudos de UX mostram que usuários toleram esperas maiores quando vêem um Skeleton em comparação a um Spinner girando em uma tela branca.