Estados (carregando, vazio, erro)
Como montar loading/skeleton, empty state e erro — e a ordem de prioridade entre eles.
Todo conteúdo que depende de dados tem 3 estados além do normal: carregando, vazio e erro. Não improvise — use os componentes do EDS.
Ordem de prioridade
No Widget: erro → carregando → vazio → conteúdo. Resolve um por vez; nunca empilha.
Carregando (loading / skeleton)
- Skeleton, não spinner: a ilustração de carregamento respeita as dimensões do container que vai preencher e sinaliza estado ocupado para leitores de tela. Evita o "pulo" de layout quando o dado chega.
- No chart: o estado de carregamento substitui o desenho por um esqueleto do gráfico, mantendo a mesma área.
- No bloco de analytics: o carregamento desenha um skeleton no corpo. Use só para uma troca de nível superior (ex.: mudar o período de todo o bloco), não para cada chart interno.
- No widget: o carregamento é repassado ao bloco/chart de dentro — não monte um loading próprio por cima.
Vazio (empty state)
Dois níveis:
1. Dentro de um chart/card — vazio "fino": ícone discreto (caixa vazia) mais um texto curto ("Sem dados"). Ocupa só a área do chart, sem chamar atenção indevida.
2. Painel / página inteira — vazio "rico": título + descrição + ação primária, com ilustração opcional. É o estado do painel recém-criado, que precisa convidar o usuário a começar (ex.: "Seu painel está em branco" / "Crie um novo ou copie widgets de outros painéis para começar." + botão "Novo gráfico").
Regras do empty:
- Sempre uma saída: uma ação primária que resolve o vazio ("Novo gráfico", "Criar…").
- Texto orientado a ação (o que fazer), não só "nada aqui".
- Em zonas de drop (sidebar de fixados), o vazio vira dica de arraste e, durante o arraste, um alvo grande ("Solte aqui para fixar").
Erro
- No chart/widget: o erro vira um aviso ativo (anunciado a leitores de tela) com ícone de alerta e uma mensagem curta ("Erro ao carregar"). Sempre que possível, ofereça uma forma de tentar de novo.
- Cor error (ver Cores semânticas).
- Erro ≠ vazio: falha de busca é erro; resposta bem-sucedida sem registros é vazio. Não troque um pelo outro — a saída de cada um é diferente (tentar de novo × criar/ajustar filtro).
Herança (não duplicar)
O bloco de analytics herda carregando/vazio/erro do chart filho — não duplique o estado nos dois níveis. O carregamento do bloco é só para um skeleton de nível superior (a troca do bloco inteiro).
Quando não usar
- Não use spinner no lugar do skeleton em busca de dados — o skeleton preserva o layout; para spinner pontual, prefira o feedback inline do próprio controle.
- Não mostre loading em interação direta (drag, fixar, reordenar) — vá direto ao resultado; veja Toasts.
Props e slots de cada estado (loading/empty/error) ficam na referência técnica: API completa no EletroDS.