Skeleton Esqueleto
Introduction
O componente Skeleton é um elemento de espaço reservado de alto desempenho que indica que o conteúdo está carregando. Ao renderizar espaços geométricos que simulam o layout, evita saltos bruscos de conteúdo (CLS) enquanto dados remotos carregam.
O componente suporta diferentes formas geométricas (colunas de texto, blocos quadrados e avatares circulares), bem como loops de animação responsivos (como brilho ou pulso) diretamente via configuração visual.
Usage
Você pode construir estados de mockup para cartões, perfis e listas assim:
1. Espaço reservado de bloco de texto multilínha
Simula um parágrafo ou campo de descrição enquanto aguarda o texto do artigo. Renderiza colunas empilhadas com um ciclo de pulso sutil automático.
{
"type": "skeleton",
"shape": "text",
"noOfLines": 3,
"variant": "pulse"
}
2. Espaço reservado de avatar circular
Renderiza uma forma circular que coincide com fotos de perfil ou ícones de avatar. Combine com esqueletos de texto para simular cabeçalhos de usuário.
{
"type": "skeleton",
"shape": "circle",
"variant": "pulse"
}
3. Contêiner de caixa com brilho (mockup de cartão)
Um contêiner retangular com animação de reflexo diagonal brilhante, ideal para cartões de mídia ou mockups de banner.
{
"type": "skeleton",
"shape": "box",
"variant": "shine"
}
4. Alternância de conteúdo no estado carregado
Quando os dados do cliente terminam de carregar, loaded: true revela instantaneamente os blocos filhos (como um cabeçalho ou cartão real) e interrompe o fundo de espaço reservado.
{
"type": "skeleton",
"loaded": true,
"children": [
{
"blockType": "heading",
"text": "Account Connected",
"size": "sm"
},
{
"blockType": "text",
"content": "API key sync complete."
}
]
}
Account Connected
API key sync complete.
Props
| Propriedade | Tipo de campo CMS | Padrão | Descrição / opções suportadas |
|---|---|---|---|
Forma (shape) | select | "box" | Formato geométrico do recurso. • Opções: "box" (cartões/imagens), "circle" (avatares), "text" (colunas de parágrafo). |
Variante de animação (variant) | select | "pulse" | Estilo de animação. • Opções: "pulse" (brilho gradual), "shine" (reflexo diagonal), "none" (preenchimento estático). |
Número de linhas (noOfLines) | number | 3 | Total de colunas ao usar shape: "text". |
Estado carregado (loaded) | boolean | false | Se true, ignora a máscara e exibe os filhos. |
Blocos filhos (children) | list | - | Componentes do page builder ocultos até loaded: true. |
Architecture Notes
- Zero deslocamento de layout: Parâmetros geométricos (altura/largura CSS grid) são processados no servidor antes da hidratação, preservando limites proporcionais e evitando o CLS.
- Brilho acelerado por GPU: Reflexos e pulsos usam transforms CSS de alto desempenho, garantindo 60fps mesmo em dispositivos móveis básicos.
- Mapeamento dinâmico: Envolver componentes com Skeleton permite buscar fluxos de dados do cliente de forma assíncrona, transitando sem interrupção de espaços para estados visíveis.