Skeleton
La forma del contenido mientras carga, para que la página no salte al llegar.
Usar
import { Skeleton } from "@unozero-ai/ui/react";
<Skeleton></Skeleton>Un elemento, nueve formas
En el kit React había un componente por forma (SkeletonRow, ListSkeleton, FormSkeleton, TableSkeleton, StatsSkeleton, CardSkeleton). Ahora es un solo Skeleton y la forma va en variant: line (por defecto), block y circle son piezas sueltas; row, list, form, table, card y stats, siluetas completas. El esqueleto es decorativo y queda oculto a los lectores de pantalla.
Componer la forma
Las piezas sueltas toman la medida que les des en el propio elemento (className o style): line mide 1 rem de alto, block 6 rem y circle es el avatar de 40 px. Combínalas con los mismos anchos y altos que el contenido real. Úsalo cuando la espera pasa de un segundo y conoces la forma; para algo más corto basta un Spinner.
Pulso o brillo
Por defecto late suave. shimmer le pasa un brillo de lado a lado, que se nota más: resérvalo para la primera carga de una vista vacía, no para cada fila que se refresca. Con prefers-reduced-motion, quieto. row es una fila de avatar y dos líneas con las medidas de una fila de List.
Lista y formulario
list repite rows filas (6 por defecto) con separador, para una bandeja de conversaciones. form pinta fields pares de etiqueta y campo (4) con el alto real del control según la densidad, y el botón final salvo que pases action={false}.
Tabla
table dibuja la cabecera (salvo showHeader={false}) y rows filas de columns columnas. Pasa columnWidths en porcentajes con los anchos de tu tabla real (huésped, fechas, importe, estado) para que las columnas no cambien de sitio al llegar los datos: columnWidths={[34, 26, 22, 18]}.
Métricas y tarjetas
stats para la fila de indicadores de un panel (ocupación, ingresos, leads) y card para una rejilla de tarjetas; count dice cuántas. La rejilla se adapta al ancho de su contenedor, no al de la ventana: en una columna estrecha se apila aunque la pantalla sea grande.
De la carga al contenido
El caso real: mientras loading es verdadero se ve el esqueleto, y al llegar los datos se sustituye por la lista en el mismo sitio. Marca el contenedor con aria-busy para que el lector de pantalla sepa que está cargando. Pulsa «Recargar conversaciones».
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).