Skeleton y Spinner

Skeleton anticipa la forma del contenido mientras carga y Spinner acompaña acciones breves. Juntos hacen que la espera se sienta más corta.

Mantención 10.000 km · JTRX-12

Sábado 18 de octubre

Buscando horas disponibles

Skeleton

Skeleton no tiene variantes: se arma con className para calcar la forma del contenido que viene. Así la pantalla no salta cuando termina de cargar.

TextoLíneas redondeadas de distinto largo, como un párrafo real.
FilaAvatar, título y detalle, igual que un ListRow cargado.
CardImagen, título y precio con el mismo radio de la card final.

Spinner

Spinner acompaña esperas cortas: enviar un formulario, buscar horas, procesar un pago. En botones ya viene integrado con la prop loading.

sm
default
lg
sm, default y lgsm dentro de botones y textos, default y lg para áreas más grandes.
Hereda el colorUsa currentColor, así que toma el color del texto que lo rodea.

Uso

Sí
Skeleton con la forma de lo que va a aparecer.
No
Un spinner solo en una pantalla de contenido. No anticipa nada.
Sí
Spinner dentro de la acción que se está procesando.
No
Skeleton en lugar de un botón. Parece que la acción no existe.

Código

import { Skeleton } from '@carvuk/design-system/components/skeleton';
import { Spinner } from '@carvuk/design-system/components/spinner';

<Skeleton className='h-4 w-2/3 rounded-full' />
<Spinner size='sm' className='text-primary' />