Delay: setTimeout

En nuestro caso, a pesar que nosotros primero cargamos los componentes y luego cargamos la data, no se nota la diferencia porque estamos usando una conexión rápida y además estamos descargando poca información. Lo que vamos a hacer ahora es simular que estos request llevan más tiempo, porque generalmente cuando se hace una petición a una API, hacemos un request a un servidor distinto, y este servidor ejecuta alguna consulta sobre una base de datos, por ejemplo, y eso puede llevar un poco más de tiempo. Si una acción tarda más de 200 milisegundos, se dice que ya es perceptible para el usuario, el usuario ya nota esa diferencia de tiempo y lo puede percibir. Entonces vamos nosotros a simular que nuestros requests llevan más tiempo, y luego vamos a ver cómo podemos mejorar la experiencia de usuario para dichas situaciones. ¿De qué manera podemos lograr ello? Al ejecutar este método “mounted”. Nosotros hacemos un request para obtener los productos y otro para obtener las categorías. Vamos a aplicar un delay justo antes de ejecutar ambas acciones. ¿Sí?, eso podemos ponerlo aquí dentro del “actions”, podemos aplicar un delay antes de ejecutar “fetch”. O sea, podemos poner un tiempo de espera, por ejemplo, de dos segundos, y luego recién ejecutar fetch. O podemos poner el delay de este lado para que luego de dos segundos recién invoquemos a la acción. Ya que tenemos aquí el llamado de las dos acciones, vamos a aprovechar y vamos a poner de este lado nuestro delay. En JavaScript existe algo llamado “setTimeout”. Esta función “setTimeout” acepta dos argumentos, acepta una función con lo que queremos ejecutar y acepta el valor propio del time out. Es decir, cuánto tiempo debemos esperar hasta que se ejecute esta función. Vamos a ponerle dos segundos para los productos, por ejemplo, y vamos a poner otro “setTimeout” de menor tiempo para las categorías, ya que generalmente siempre van a ser menos, y los productos siempre van a tener muchos más datos. Entonces vamos a ponerle dos segundos para las categorías y cuatro segundos para los productos. Seguimos haciendo lo mismo, pero estamos aplicando un delay justo antes de invocar a las acciones que se encargan de hacer “fetch”. Entonces vamos a actualizar en el navegador y vemos que no hay nada de información. Luego de dos segundos aparecen las categorías y luego de dos segundos más aparecen los productos. Sin embargo, mientras la página está cargando, hay un tiempo de espera en el que el usuario no ve la información, no sabe si hay más categorías o si hay productos realmente.

Crea una cuenta y continúa aprendiendo 🚀

Delay: setTimeout