Skeleton Esqueleto
Introduction
El componente Skeleton es un elemento de marcador de posición de alto rendimiento que indica que el contenido se está cargando. Al renderizar marcadores geométricos que simulan el diseño, evita saltos bruscos de contenido (CLS) mientras se cargan datos remotos.
El componente admite distintas formas geométricas (columnas de texto, bloques cuadrados y avatares circulares), así como bucles de animación responsivos (como brillo o pulsación) directamente mediante configuración visual.
Usage
Puedes construir estados de maqueta para tarjetas, perfiles y listas así:
1. Marcador de bloque de texto multilínea
Simula un párrafo o campo de descripción mientras se espera el texto del artículo. Renderiza columnas apiladas con un ciclo de pulsación sutil automático.
{
"type": "skeleton",
"shape": "text",
"noOfLines": 3,
"variant": "pulse"
}
2. Marcador circular de avatar
Renderiza una forma circular que coincide con fotos de perfil o iconos de avatar. Combínalo con esqueletos de texto para simular cabeceras de usuario.
{
"type": "skeleton",
"shape": "circle",
"variant": "pulse"
}
3. Contenedor de caja con brillo (maqueta de tarjeta)
Un contenedor rectangular con animación de reflejo diagonal de brillo, ideal para tarjetas multimedia o maquetas de banner.
{
"type": "skeleton",
"shape": "box",
"variant": "shine"
}
4. Conmutación de contenido en estado cargado
Cuando los datos del cliente terminan de cargar, loaded: true revela al instante los bloques hijos (como un encabezado o tarjeta real) y detiene el fondo de marcador.
{
"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
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Forma (shape) | select | "box" | Formato geométrico del recurso. • Opciones: "box" (tarjetas/imágenes), "circle" (avatares), "text" (columnas de párrafo). |
Variante de animación (variant) | select | "pulse" | Estilo de animación. • Opciones: "pulse" (brillo gradual), "shine" (reflejo diagonal), "none" (relleno estático). |
Número de líneas (noOfLines) | number | 3 | Total de columnas al usar shape: "text". |
Estado cargado (loaded) | boolean | false | Si es true, omite la máscara y muestra los hijos. |
Bloques hijos (children) | list | - | Componentes del page builder ocultos hasta que loaded sea true. |
Architecture Notes
- Cero saltos de diseño: Los parámetros geométricos (altura/ancho CSS grid) se parsean en el servidor antes de la hidratación. Esto preserva los límites proporcionales y evita el cambio acumulativo de diseño (CLS).
- Brillo acelerado por GPU: Los reflejos y pulsos usan transforms CSS de alto rendimiento, garantizando 60fps incluso en móviles básicos.
- Mapeo dinámico de contenido: Envolver componentes con Skeleton permite obtener datos del cliente de forma asíncrona, transitando sin problemas de marcadores a estados visibles.