@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
# Skeleton
Reserva el espacio del contenido que aún no cargó. Reduce la sensación de espera y evita saltos de layout al pintar.
```tsx
```
## Default
### Cuándo usar
- Cargas medibles que tardan más de 200 ms.
- Listas, tarjetas y bloques de detalle donde la forma del contenido es predecible.
- Cuando puedes reservar el alto y el ancho reales para no provocar saltos al pintar.
### Cuándo no usarlo
- Cargas menores a 200 ms: el destello distrae más que ayuda.
- Cargas indeterminadas o muy variables: usa un spinner.
- Bloques pequeños y aislados donde un spinner inline es suficiente.
## Composición
### Imita la estructura final
El skeleton debe parecerse al contenido real. Mantén proporciones, número de líneas y posición de elementos para que la transición se sienta natural.
```tsx
```
### Card con detalle
## Accesibilidad
### Anuncio del estado
- Marca el skeleton con aria-hidden para que el lector de pantalla no lo lea.
- Acompaña la zona en carga con una región aria-live polite y un texto como Cargando expedientes.
- Al cargar, anuncia el resultado en la misma región: 14 expedientes cargados.
- Respeta prefers-reduced-motion: detén el shimmer si el usuario reduce movimiento.
## Contenido
### Texto de acompañamiento
- Si la carga supera 3 segundos, agrega un mensaje breve: Cargando expedientes…
- No mezcles skeletons con datos ya cargados de manera intercalada: confunde la jerarquía.