Skeleton

Estructura de espera mientras llega el contenido. Decorativo (aria-hidden); no sustituye un mensaje de error o vacío. Para tablas usa SkeletonTable.

Preview principal

SKELETONpulse

pulsestatic

aria-hidden · placeholder de carga (no es estado de error)

Tabla

SkeletonTable ocupa el hueco de Table mientras cargan las filas.

SKELETON TABLE5×5

columns · rows · showHeader

Variantes

line, circle, rect — text es alias de line.

SHAPES

line · SkeletonText

circle

rect

Composición

Patrones habituales de UI en carga.

LAYOUTS

lista

tarjeta

Uso

import { Skeleton, SkeletonText, SkeletonTable } from "devsoftec-ui";

<Skeleton variant="circle" width={40} height={40} />
<SkeletonText lines={4} />

{/* Mientras carga la Table */}
{loading ? <SkeletonTable columns={5} rows={5} /> : <Table ... />}

Props

Skeleton

Prop	Tipo	Default	Descripción
variant	line | text | circle | rect	line	Forma (text = alias de line)
width	string | number	—	Ancho
height	string | number	—	Alto
noAnimation	boolean	false	Sin pulso

SkeletonText

Prop	Tipo	Default	Descripción
lines	number	3	Cantidad de líneas
height	number	12	Alto de cada línea
noAnimation	boolean	false	Sin pulso

SkeletonTable

Prop	Tipo	Default	Descripción
columns	number	4	Columnas
rows	number	5	Filas de datos
showHeader	boolean	true	Fila de cabecera
noAnimation	boolean	false	Sin pulso

Comportamiento

• Siempre aria-hidden="true"
• Pulso CSS; noAnimation o prefers-reduced-motion lo apagan
• SkeletonTable imita el contenedor card de Table