---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 19
titulo: "Skeleton — `estável` · validado pelo Rafael em 2026-08-04 (suite v0.17)"
sequencia: 21 de 98
bytes_do_corpo: 3596
md5_do_corpo: 2b3e87e42409760e11e5fc17c5874248
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 19. Skeleton — `estável` · validado pelo Rafael em 2026-08-04 (suite v0.17)

> **Base:** R1 — NN/g Skeleton Screens 101 (só carga de página; nunca processo; frame-display proibido; <10s), Carbon (1–3s; só container/dados; nunca toast/modal/dropdown; carga progressiva em lotes; vai-e-vem reservado ao skeleton). R2 — shadcn Skeleton, padrões CSS shimmer. R3 — Fiori placeholder loading, **evidência conflitante tratada em S4**: Viget 2017 (skeleton PIOR que spinner em percepção no teste mobile deles) × estudo acadêmico 2018 (skeleton MELHOR em velocidade percebida e navegação) × Chung (a FORMA do motion modula: onda lenta E→D percebida mais curta que pulso; amostras pequenas = pista, não prova).

### 19.1 Decisões S1–S6

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| S1 | Papel RESTRITO: carga inicial de ESTRUTURA de conteúdo (tabela, card, lista, dashboard — o dia a dia do ERP). NUNCA processo (upload/submit/conversão → progress §20); NUNCA toast/modal/dropdown/overflow (dentro de modal pode; o modal não) | NN/g; Carbon | Skeleton universal |
| S2 | Fidelidade estrutural: espelha o layout REAL (nº de colunas verdadeiro; contagem de linhas plausível ao que vem) e trava o layout (anti-shift). Frame vazio proibido | "3 cards no skeleton, 7 no conteúdo" quebra confiança; NN/g: frame-display não informa nada | Blocos genéricos |
| S3 | Motion: shimmer em ONDA esquerda→direita, LENTA (~1.8s/ciclo); `prefers-reduced-motion` → estático. Direções reservadas: barra corre E→D; vai-e-vem é exclusivo do skeleton | Chung (onda > pulso; lenta > rápida — como pista); Carbon (reserva de direção) | Pulse; shimmer rápido |
| S4 | **Postura declarada:** a SEED adota skeleton pelo benefício ESTRUTURAL (expectativa de layout + anti-shift + carga progressiva em lotes), NÃO pela promessa de "parecer mais rápido" — a evidência de percepção é CONFLITANTE (Viget contra × acadêmico a favor × Chung modulando) e fica registrada assim. Janela alvo: 1–3s | Honestidade epistêmica do método; Carbon 1–3s | Vender skeleton como bala de prata |
| S5 | Shimmer NUNCA eterno: timeout de 15s → estado de erro (alerta §15, severidade erro no slot `role="alert"`) ou empty state (item 11) | Shimmer perpétuo esconde falha de API — sempre parear com timeout e fallback | Buraco negro de carregamento |
| S6 | ARIA: blocos decorativos (`aria-hidden="true"`); container com `aria-busy="true"` + anúncio discreto do R4 (início/fim). AT nunca "lê" retângulos | aria-busy no escopo que muda | Skeleton legível por AT |

### 19.2 Anatomia e tokens

Bloco: `--seed-cinza-100` (light) / `#38464F` border-subtle-dark (dark), radius 6; shimmer = gradiente 90° com highlight `--seed-cinza-50`/`#4D606C` varrendo E→D em 1.8s. Alturas casam com a tipografia real da célula/linha. Dataviz: esboço de skeleton de gráfico registrado, forma final adiada para F5/tokens v1.3 (ponta declarada). Contraste: blocos são DECORATIVOS (o sinal informativo é aria-busy + anúncio + shimmer) — pares medidos e reportados sem gate, com esta justificativa.

### 19.3 Os 7 testes

1. Container/página ok; blocos decorativos isentos com justificativa. 2. Espera por forma (estrutura) + movimento + anúncio. 3. Grayscale: nasce cinza. 4. Skeleton × conteúdo real distinguíveis a 1s (blocos × texto). 5. Um skeleton por região (R6). 6. Estrutura visível = expectativa honesta (S2). 7. 360px: colunas do skeleton colapsam IGUAL ao conteúdo real. *(Verificado: suite v0.17, aprovado.)*

---