Componentes
19. Skeleton
seed-componentes.md v1.43 · §19seção 21 de 9819-skeleton-estavel-validado-pelo-rafael-em-2026.md · MD5 2b3e87e4Título completo no canon: 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#
- 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.)