Los componentes cargador indican que el sistema está procesando un comando, como cargar una aplicación, enviar un formulario, realizar un cálculo o guardar actualizaciones. Use cargadores cuando el sistema necesite que los usuarios esperen un tiempo no especificado. Esto garantiza a los usuarios que el procesamiento del sistema está en marcha y que el sistema está funcionando.
Los componentes cargador tienen dos variantes: cargador y cargador integrado.
Los cargadores se utilizan para procesos como la recuperación de datos y los cálculos lentos. Ayudan a gestionar las expectativas de los usuarios y proporcionan retroalimentación durante la carga de la página completa.
Cargador integrado
Los cargadores integrados proporcionan información visual que indica que se está procesando una acción, como Crear, Actualizar y Eliminar.
Cargador (izquierda) y cargador integrado (derecha)
Cargador
A. Indicador de carga: Aparece en una animación en bucle como el logotipo de Guidewire.
Cargador integrado
A. Indicador de carga: Aparece como dos flechas que giran en el sentido de las agujas del reloj. Cuando los datos se procesan correctamente, el indicador de carga cambia a una marca de verificación verde.
B. Rótulo (opcional): Texto de ayuda que explica el estado de carga.
Utilícelo para mostrar el progreso de carga de toda una página o de una operación importante, como cuando se espera a que se cargue una aplicación o se recuperen datos.
Úselo siempre que se proyecte que el tiempo de espera será mayor a tres segundos.
En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
Los cargadores integrados pueden tener texto opcional que describa la acción que se lleva a cabo. Por ejemplo, “Creando cuenta...”.
El rótulo debe cambiar para reflejar el estado de procesamiento. Por ejemplo, si un usuario está creando una cuenta, el rótulo podría ser “Cuenta creada” cuando finalice la acción.
Los cargadores integrados se pueden usar sin texto adjunto en ciertas situaciones, como cuando aparecen en un campo de entrada.
Use rótulos que sean cortos, significativos y precisos para la acción pendiente.
Tanto el cargador integrado como los componentes del cargador utilizan el rol WAI-ARIA de “alert” para garantizar que los usuarios de lectores de pantalla reciban la misma información. El elemento con role=“alert” usa una asociación aria-labelledby con una <div> de class="jutCubeLoaderscreenReaderOnly" (y el valor de “Cargando”) para proporcionar un nombre accesible.
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
El elemento se puede operar con teclado, así como con mouse.
Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Si se cambia el mensaje de carga, por ejemplo, asegúrese de que sea claro y conciso.
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
Controls whether the Loader UI is shown or the children components. For Boolean values, if set to false, the Loader UI is displayed; if set to true the children are displayed. For Promise values, the Loader UI is displayed until the promise has completed, then the children are displayed.
A function to render a component to display when loading. By default, it will display the built in BrandedLoader component that displays an animation using the guidewire logo.
Controls whether the Inline Loader shows its loading or completed versions. For Boolean values, if set to false, the loading version is displayed; if set to true, the success version is displayed. For Promise values, the loading version is displayed until the promise has completed, then the completed version is displayed. For Promise arrays, they behave like Promise values except it will be considered loading until every promise in the array has been fulfilled.
An Icon component or icon name. For example, SearchIcon or 'gw-search', to be shown when content has completed loading. Note that this icon will not show unless there is also a successMessage value.
Consulte la sección Uso para obtener detalles sobre cómo diseñar un cargador o cargador integrado correctamente y las diferentes opciones de configuración que ofrecemos.
Puede utilizar la propiedad renderLoader para definir un cargador personalizado en lugar del cargador predeterminado. Esta propiedad es una función que devuelve cualquier elemento de React, podría ser tan simple como el texto que se muestra en el ejemplo o una animación más compleja como se muestra en el cargador predeterminado.
Un cargador integrado es un componente que indica si el contenido se está cargando actualmente. Un cargador integrado básico mostrará un ícono predeterminado cuando el contenido se esté cargando y nada en absoluto cuando el contenido no se esté cargando.
<InlineLoader loading={loadingStatus}// true, false, or Promise />
Hay dos formas de cambiar el componente entre sus versiones de carga y no carga:
Si la propiedad loading es un booleano, se mostrará el ícono de carga predeterminado cuando el valor de esta propiedad sea true.
Si la propiedad loading es una Promise, inicialmente mostrará el ícono de carga predeterminado, pero se actualizará automáticamente cuando se complete la operación asíncrona de la promesa.
Puede utilizar las propiedades successMessage y loadingMessage para agregar texto personalizado al componente cargador integrado. Cuando haya un mensaje de acción correcta, también se mostrará este texto junto al ícono de marca de verificación.
<InlineLoader loading={loadingStatus}// true, false, or Promise loadingMessage="Loading..." successMessage="Success!" />
Puede usar las propiedades loadingIcon y successIcon para agregar íconos personalizados a la mensajería del componente cargador integrado. Tenga en cuenta que, como se indicó anteriormente, también debe haber un mensaje de acción correcta para que se muestre cualquier contenido cuando se complete la carga.
Cargador (izquierda) y cargador integrado (derecha)
