Introducción

Un componente de utilidad de diseño de carga visual que empareja un elemento Spinner giratorio con texto de mensaje de estado acompañante. Se utiliza principalmente para gestionar las expectativas de los usuarios durante obtenciones del servidor, operaciones de archivos, transiciones de estado o estados de procesamiento de contenido dentro de los bloques de diseño.

El componente Loader está totalmente integrado como un bloque loader en el Page Builder, permitiendo a los autores de contenido y desarrolladores configurar fácilmente texto de estado visual y alineaciones del spinner directamente dentro de los esquemas de página del CMS.

Uso

Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran cargadores interactivos.

1. Cargador de Estado Central Estándar

Un indicador de carga clásico con texto de estado estándar, adecuado para entradas de panel principales, actualizaciones de contenido o bloques de carga diferida.

{
  "type": "loader",
  "text": "Loading workspace data...",
  "spinnerPlacement": "start"
}

2. Cargador con Spinner Final (Alineación al Final)

Presenta el spinner visual alineado después del mensaje de estado, proporcionando un flujo visual alternativo para pies de tarjeta o acciones de botón en línea.

{
  "type": "loader",
  "text": "Please wait while we process your request",
  "spinnerPlacement": "end"
}

Props

Notas para Desarrolladores y Accesibilidad

• Sin Hidratación (Solo Estático): El Loader es un ayudante de diseño puramente presentacional designado como componente Solo Estático (Tier 3). Se compila en marcado HTML/CSS estándar del lado del servidor con cero absoluto de JavaScript interactivo del lado del cliente.
• Cumplimiento WAI-ARIA: En su interior, este componente está diseñado para tecnologías de asistencia, compilando con parámetros de región en vivo o contenedor ocupado apropiados (p. ej., aria-busy="true", role="status" en contenedores principales) asegurando una comunicación fluida de las actividades en segundo plano en curso.