La ruleta animada de Salesforce es probablemente uno de los elementos más reconocibles del Salesforce Lightning Design System (SLDS). Los ve en todo Salesforce Lightning: al cargar aplicaciones, pestañas o al crear y actualizar registros. Indican que se está cargando una función y que estará disponible pronto. Aunque los hilanderos son elementos centrales del diseño de la interfaz de usuario, los desarrolladores a menudo los pasan por alto o no comprenden su importancia.
Desde el lanzamiento de Salesforce Lightning, Hilandero relámpago (hilandero de relámpagos) está disponible como componente base y se puede usar fácilmente para indicar la carga en la aplicación. Este componente implementa el modelo Spinner de Salesforce Lightning Design System (SLDS).
¡Sí, los hilanderos son importantes!
Los desarrolladores suelen centrarse exclusivamente en la funcionalidad debido a la necesidad de entregar la solución lo más rápido posible. La funcionalidad es obviamente más importante, pero en realidad, tanto el diseño de la interfaz de usuario como la función trabajan juntos para producir una aplicación pulida que sea agradable y comprensible para el usuario.
1) Cargando diferentes pasos sin el hilandero de relámpagos
Fíjate bien en el primer ejemplo. El componente carga varios pasos diferentes sin el control giratorio. Vea cómo los elementos cambian rápidamente de estado y se mueven por todos lados, tal como se muestran antes de recuperar sus datos. Esta interfaz de usuario no solo es visualmente poco atractiva, sino que además, según el tiempo de carga, los usuarios podrían interactuar con los elementos antes de que estén listos, lo que podría causar problemas.
2) Cargando diferentes pasos con el hilandero de relámpagos
Es importante decirle al usuario lo que está sucediendo y tener una buena retroalimentación visual. En el segundo ejemplo, se utiliza un control giratorio para comunicar al usuario que los datos se están cargando/actualizando en segundo plano y que la operación pronto se completará. Un control giratorio también evitará la interacción con los elementos componentes hasta que el estado esté listo.
Utilice la ruleta cuando:
– 🔄 Obteniendo datos del controlador Apex
– 🔄 Insertar/Actualizar/Eliminar registros
– 🔄 Realizar cualquier operación que no se complete de inmediato
¿Spinner o barra de progreso?
Aunque los hilanderos son los indicadores de carga más utilizados en el diseño de la interfaz de usuario, no son los únicos. Los giradores no brindan retroalimentación a los usuarios, ni señales de progreso, y los usuarios pueden terminar frustrándose y preguntándose si hay algún problema con la aplicación. Como regla general, para operaciones que toman más de 10 segundos, en su lugar se debe utilizar una barra/anillo de progreso. Una barra de progreso establece una expectativa clara del tiempo de carga con la señal visual lineal.
hilandero de relámpagos (izquierda) , barra de progreso del rayo (medio) y anillo-de-progreso-del-rayo (bien)
Pruébalo 🚀
Veamos el rayo en acción. En este componente simple, recuperamos opciones de lista de selección del controlador Apex para usar en el cuadro combinado Lightning. Vamos mostrando la ruleta hasta que obtengamos los datos del controlador. Cuando obtenemos las opciones de la lista de selección del controlador Apex, podemos almacenarlas en una variable, ocultar el control giratorio y mostrar las listas de selección.
Lightning-Spinner está pensado para renderizarse de forma condicional. Puede utilizar if:true|false para mostrar/ocultar dinámicamente el control giratorio. En este ejemplo, la variable isLoading se utiliza para alternar la ruleta.
El si: verdadero|falso La directiva eliminará e insertará el elemento del DOM por completo. Para saber más ver Renderizar elementos DOM condicionalmente.
Veamos los atributos.
▹ tamaño: el tamaño de la ruleta. Los tamaños aceptados son pequeño, mediano y grande. Este valor predeterminado es medio.
▹ variante: la variante cambia la apariencia (color) de la ruleta. Las variantes aceptadas incluyen base, marca e inversa. El valor predeterminado es base.
🧑🏻💻 Consejo del desarrollador: color del girador
El marca La variante giratoria generalmente debe usarse cuando hay una operación de carga que es claramente más importante que las otras operaciones de carga y necesita llamar la atención sobre ella (como guardar un registro). El marca La ruleta utilizará el color de la marca del tema de la organización activa seleccionado en Temas y marca > [Active Theme] >Color de la marca. De forma predeterminada, las organizaciones utilizan el tema Lightning Blue integrado. El inverso La variante se puede utilizar para mostrar una ruleta blanca sobre un fondo oscuro.
▹ clase: se utiliza para agregar una clase personalizada al elemento externo del componente.
Agreguemos algo de texto
Por lo general, no se muestra ningún texto con los controles giratorios CSS y el componente Lightning-Spinner no proporciona esta funcionalidad lista para usar. Si miramos el plano de Spinner del Salesforce Lightning Design System (SLDS), podemos usar la definición HTML y agregar un solo elemento para contener el texto.
Necesitamos agregar CSS para nuestro nuevo elemento para poder centrar el texto correctamente.
Cambiar el fondo de la ruleta
El componente Lightning-Spinner creará una superposición semitransparente sobre el contenido de fondo. Si inspeccionamos los elementos HTML podemos ver que la superposición con la clase .slds-spinner_container tiene un color de fondo rgba(255, 255, 255, 0.75). Este es un fondo blanco con un 75% de opacidad, lo que hace que el contenido de abajo aún sea ligeramente visible.
A veces es posible que desees que el contenido esté completamente oculto y tenga un fondo blanco no transparente. Esto se puede lograr fácilmente con CSS personalizado que cambia el color de fondo del elemento .slds-spinner_container.
1) No dejes que la ruleta se salga del componente.
Lo he visto así demasiadas veces. Para utilizar el control giratorio en un componente, el padre del control giratorio debe establecerse en posición: relativa. Puede utilizar la clase de utilidad .slds-is-relative en el elemento principal para lograr esto.
2) No olvides especificar la altura del contenedor.
El rayo y su superposición se expandirán a todo el alto y ancho de su elemento principal. Sin embargo, si los atributos de altura o altura mínima del elemento principal no están establecidos, el elemento principal colapsará inesperadamente en la ruleta (por ejemplo, la ruleta dentro del cuerpo de la tarjeta relámpago). En este caso, envuelva la ruleta dentro de un
3) No utilice varios controles giratorios en un componente
Evite mostrar varios controles giratorios de carga en una sola página/componente. Múltiples hilanderos hacen que la aplicación parezca ocupada y que distraiga.
4) No uses el tamaño de ruleta incorrecto
Utilice el tamaño de ruleta apropiado con respecto al contenedor principal. Cuando muestre la ruleta dentro de una tarjeta modal o relámpago pequeña o mediana, no use la variante grande. Utilice la ruleta grande sólo en contenedores de pantalla completa.