Loading Skeleton: Que son y porque deberías usarlos

Vivimos en la época de la inmediatez, queremos tenerlo todo aquí, ahora y ya, si es posible. Y, por supuesto, esto se refleja directamente en nuestra forma de relacionarnos con las aplicaciones.

Los usuarios odiamos esperar, eso es algo que todos sabemos. ¿Cuántas veces te has salido de una página cuando tardaba demasiado en cargar?

De hecho, un estudio realizado por Google nos da una idea aproximada del tiempo que un usuario está dispuesto a esperar en una pantalla de carga:

Como podemos ver, ¡el 32% de los usuarios abandona la página cuando la web tarda entre 1 y 3 segundos!

Así que aquí es donde nosotros, los desarrolladores, entramos en juego.

Hay cosas que no podemos cambiar, como el tiempo que tarda nuestra página en hacer fetch a la API que nos proporciona la información que se cargará en la web. Pero hay técnicas que podemos utilizar para agilizar los tiempos de carga o, en su defecto, hacer más ameno el tiempo de carga.

Aquí es donde aparecen los Loading Skeletons (Esqueletos de carga). Probablemente hayas visto esto en muchos sitios, pero es posible que nunca les hayas prestado atención.

Si te fijas, hay elementos grises que simulan el contenido que debería aparecer cuando la página carga.

A estos elementos se les llama Skeleton Loader, y se utilizan para mostrar contenido en la página mientras los datos se cargan, evitando así tener una página en blanco mientras se cargan los datos. Esto brinda una sensación de tranquilidad al usuario, indicándole que el contenido está casi terminado de cargar.

Para ello, vamos a utilizar como ejemplo una aplicación que estoy construyendo. Es una web que se conecta a la API de IMDB para cargar las portadas de películas, como si se tratara de una web de streaming como Netflix o HBO.

Veamos un ejemplo de cada caso:

Como podemos ver, al usar los Skeletons, la espera se vuelve más amena, no solo porque la web no se ve vacía, sino también porque con los efectos de movimiento con CSS, el usuario entiende que la información está cargando y que la página no se ha quedado "pillada”

Para hacer esto, implementaremos la siguiente lógica:

Halconearemos los skeletons en los contenedores donde cargaremos la información, como las portadas de las películas.

Les aplicaremos una clase con una animación CSS para que los skeletons se muevan, dando así un efecto un poco más dinámico.

Cuando cargue el contenido, sobrescribiremos los skeletons con la información que realmente queremos mostrar, es decir, las portadas de las películas en este caso.