Reto: loading skeletons

¿Cómo mejorar la experiencia de carga en tu aplicación con loading skeletons?

Introducir loading skeletons en nuestra aplicación no solo mejora su aspecto visual durante el proceso de carga de datos, sino que también ofrece a los usuarios una mejor experiencia durante esos momentos de espera. Esta técnica es esencial para evitar las incómodas transiciones con pantallas vacías o mensajes de carga sencillos. Exploraremos cómo implementar estos loading skeletons y darles un toque estético y funcional.

¿Qué cambios iniciales debes realizar para comenzar?

Es crucial empezar asignando componentes específicos para diferentes estados de tu aplicación, como error, carga y vacío. Esto no solo organiza mejor tu código, sino que también te permite personalizar la experiencia del usuario según cada escenario.

En el siguiente ejemplo, se crean directorios y archivos índice para diferentes estados:

// Crear los directorios y archivos de índice
todosLoading/index.js
todosError/index.js
emptyTodos/index.js

¿Cómo crear componentes visuales de carga?

La implementación comienza modificando los componentes de carga para que muestren un diseño más atractivo, con la ayuda de CSS y animaciones.

1. Estructura básica del componente de carga:

   Cambiaremos de un simple texto de carga a una estructura de div y span que permita aplicar estilos:

   function todosLoading() {
       return (
           <div className="loading-todo-container">
               <span className="loading-todo-complete-icon"></span>
               <p className="loading-todo-text"></p>
               <span className="loading-todo-delete-icon"></span>
           </div>
       );
   }
   

2. Incorporación de estilos y animaciones CSS:

   Aquí es donde se da vida a los loading skeletons. Utilizamos gradientes y animaciones para crear un efecto dinámico:

   .loading-todo-container {
       position: relative;
       display: flex;
       background: linear-gradient(to right, #ddd, #eee, #ddd);
       animation: loading 1.5s infinite;
   }
   
   @keyframes loading {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   

¿Por qué replicar la estructura existente del componente?

Replicar la estructura del componente original de los items (como los íconos de completar y eliminar) en tu diseño de carga, garantiza que la interfaz visual provisional sea coherente con el diseño final. Así construí nuevas clases que emulan estas posiciones y estilos, asegurando homogeneidad entre el estado de carga y el resultado final, usando un border-radius y una paleta de colores adecuada.

¿Qué hacer para manejar varios estados de carga?

En este caso, se agregaron varios componentes de carga a la vista inicial, mostrando múltiples loading skeletons al mismo tiempo. Esta decisión estética crea una anticipación visual sobre el contenido que está por venir:

// En AppUI.js
return (
    <>
        <todosLoading />
        <todosLoading />
        <todosLoading />
    </>
);

¿Por qué es importante cuidar la experiencia del usuario (UX) durante la carga?

Los loading skeletons no solo son agradables a la vista, sino que también ofrecen a los usuarios una experiencia más fluida y menos frustrante al interactuar con una aplicación que está cargando datos. Este enfoque evita dejar a los usuarios con la percepción de error o vacíos inexplicables.

Reto Opcional: Expansion del uso de Loading Skeletons

Intenta implementar loading skeletons para otras partes de la aplicación, como el campo de búsqueda de Todo y el conteo de Todo, para asegurar una experiencia cohesiva durante todo el proceso de carga. Esto puede solucionar inconsistencias, como mostrar "0 de 0 todos completados", mejorando aún más la experiencia general.

Finalmente, recuerda que estas prácticas no solo mejoran la apariencia de tu aplicación, sino que también su usabilidad y percepción de profesionalismo. ¡Explora, experimenta y sigue aprendiendo para hacer tus aplicaciones más increíbles!