Skeleton

• Anticipar la estructura de un contenido que está cargando: ocupar de antemano el espacio que va a ocupar el contenido real (una imagen, un título, una línea de texto), para que la pantalla no salte cuando termina de cargar. Ej.: la fila de una tabla mientras se resuelve la consulta que trae sus datos.
• Mostrar contenido parcial ya disponible: cuando parte de la pantalla ya está disponible (cacheada de una sesión anterior) y el resto todavía está cargando. Esto permite que el usuario empiece a leer el contenido ya disponible mientras el resto termina de cargar.
• Anticipar elementos de tamaño variable que tardan en renderizarse: cuando el contenido dinámico incluye piezas como imágenes pesadas, banners publicitarios o componentes incrustados de terceros, cuyo tamaño final se conoce de antemano aunque tarden en aparecer.

• Cuando el componente final ya tiene su propio placeholder: la mayoría de los átomos de Nimbus expone su propia versión de carga (Input.Skeleton, Text.Skeleton, Button.Skeleton, IconButton.Skeleton), ya dimensionada para ese componente. En su lugar, usar el .Skeleton del componente correspondiente y reservar el Skeleton atómico para layouts sin un equivalente propio.
• Comunicar que un proceso está en curso tras una acción del usuario: cuando lo que carga no es contenido que va a aparecer en el lugar del placeholder, sino el resultado de una acción puntual (enviar un formulario, procesar un pago). En su lugar, usar Spinner.
• Reemplazar contenido estático: elementos que no cambian de una carga a otra (un encabezado fijo, un ícono de marca). Mostrarlos siempre, sin placeholder.
• Cargas ultrarrápidas (menos de 3 segundos): el parpadeo del placeholder es más molesto que útil cuando el contenido real aparece casi de inmediato. En su lugar, no mostrar ningún estado de carga.
• Descargas o cargas pesadas de duración larga (más de 10 segundos): cuando existe información de progreso real (porcentaje completado), preferir una barra de progreso en lugar de un Skeleton, que no comunica cuánto falta.

1. Surface: rectángulo cuyo ancho, alto y radio de borde se definen con las props width, height y borderRadius, para aproximar la forma del contenido final. Una animación integrada alterna su color de forma continua, para comunicar que ese espacio está cargando.

Combinar varios Skeleton, cada uno con las dimensiones de la parte de contenido que reemplaza, para anticipar la estructura completa de un layout mientras carga. Una forma circular (borderRadius="50%") representa una imagen o un avatar; una forma rectangular con radio bajo representa una línea de texto o un botón.

• Rol puramente visual: el Skeleton no es un elemento interactivo ni enfocable; no debe recibir foco de teclado ni contener texto real.
• Anunciar el estado de carga: el Skeleton no informa por sí solo que el contenido está cargando. Agregar aria-busy="true" (y, si corresponde, aria-live="polite") en el contenedor que agrupa los placeholders, para que la tecnología de asistencia anuncie el estado de carga.
• Movimiento reducido: la animación de color es continua; si el equipo detecta necesidad de respetar prefers-reduced-motion, evaluar limitar la duración de la carga o atenuar la animación mediante estilos propios, ya que el componente no expone una prop para desactivarla.
• Duración acotada: reemplazar el Skeleton por el contenido real (o por un mensaje de error) en cuanto esté disponible; no dejarlo indefinidamente si la carga falla.

Instalá el componente vía terminal.

Las propiedades adicionales se pasan al elemento <Skeleton>. Consultá la documentación para ver la lista de atributos aceptados por el elemento <Skeleton>.

• Spinner — Para comunicar que un proceso está en curso tras una acción del usuario, en lugar de anticipar la forma de un contenido que está cargando.
• Input — Expone su propio Input.Skeleton, ya dimensionado para ese componente.
• Icon button — Expone su propio IconButton.Skeleton, ya dimensionado para ese componente.

Skeleton