La mayoría de aplicaciones web que desarrollamos en el mundo de la programación se comunican con otros sitios. Sean con librerías de datos o con nuestro propio API, hay muchas acciones que dependen de esta comunicación. Por ello, es fundamental definir qué ve el usuario mientras nuestra aplicación espera respuestas para continuar. En este post, te enseñaremos cómo controlar loading en react-loading para definir cómo se ve la espera en tu aplicación.
¿Qué es controlar loading en React?
Cuando hablamos de controlar loading en React, nos referimos a crear un tipo de feedback para que el usuario sepa que nuestra aplicación está cargando. Esto es fundamental cuando hemos creado una acción que requiere comunicación con otros sitios y que toma más tiempo. Un ejemplo de esta acción es hacer una llamada a una API, ya sea para enviar o pedir datos. En nuestro post sobre enviar datos a una API desde React, te hemos enseñado cómo hacer una llamada a la API cuando necesitamos enviar los datos de credenciales insertadas por el usuario al crear una página de login en React.
Controlar loading en React también nos permite definir qué sucede mientras esperamos la respuesta de una función. Como has podido leer en nuestro post sobre async y await en React, podemos usar estas palabras clave JavaScript para definir qué sección de código se debe esperar a resolver antes de continuar. A este espacio de espera se le denomina loading. A continuación, te enseñamos cómo controlarlo.
¿Cómo controlar loading en React?
Para controlar loading en react loding , al igual que para controlar la mayoría de datos dentro de esta librería, debemos crear un estado. Recuerda que un estado en React es un dato que cambia con el tiempo. Entonces, con base al valor de un estado en determinado momento, podemos definir qué ve el usuario. Por ejemplo, podemos crear un estado para is loading react con el que definimos que, si loading es true, entonces mostramos un spinner. El simple hecho de que tengamos un elemento spinner que desaparece y aparece es lo que nos hace pensar en estados.
A continuación, te mostramos la línea de código con la que hemos creado nuestro estado:
const [isLoading, setIsLoading] = useState (false)
Ahora que tenemos nuestro estado, podremos usar la función setIsLoading con los valores true y false a lo largo de nuestro código para acompañar a los momentos que necesitan un tiempo de carga. Entonces, supongamos que tenemos un código en el que estamos esperando el resultado de la llamada a la API y su token. Justo antes de la línea de código que define esta espera, insertaríamos setIsLoading (true). Después de que la llamada termine y obtengamos el resultado, insertaríamos setIsLoading (false).
Te recomendamos que, cuando tu llamada tenga un error, definas setIsLoading (false) para no dejar en espera a tu usuario. En estos momentos, es mejor mostrar el error que has obtenido que dar la ilusión de que la aplicación está cargando. Para saber más sobre dónde insertar esta línea, te recomendamos leer nuestro post sobre controlar error login en React.
Una vez hemos definido el estado isLoading y sus distintos valores a lo largo de nuestro código, podremos definir qué sucede cuando isLoading es igual a true. Podríamos, por ejemplo, tener un elemento Spinner que se active cuando esta situación sucede. Para ello, insertaríamos la siguiente línea de código dentro del componente en el que queremos que suceda:
{isLoading && <Spinner/>}
En este post no te enseñaremos cómo crear este componente spinner, pues para ello necesitaríamos recurrir a CSS. Sin embargo, si quieres crearlo te recomendamos nuestro post sobre cómo diseñar un spinner básico en CSS y cómo animar un spinner en CSS. También puedes echarle un vistazo al artículo sobre cargar CSS desde un componente React.
Lo que sí podrías hacer con el estado es definir que tu botón de login esté deshabilitado. Para ello, podrías crear un estilo disabled en tu botón, presente cuando no haya usuario, contraseña o cuando esté cargando. Tendrás que usar las siguientes líneas de código:
<Button
disabled= {!username || !password || isLoading}
>
Log in
</Button>
¿Quieres seguir aprendiendo?
Ahora que sabes cómo controlar loading en React, tienes claro que esta librería de JavaScript nos permite ejecutar todo tipo de funciones, pero ¡todavía hay mucho por aprender para dominar React! Si quieres seguir formándote en relación a + las posibilidades de esta y otras herramientas de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, en donde aprenderás a desarrollar con lenguajes como JavaScript, HTML y CSS. ¡Matricúlate ya y mejora tu trayectoria profesional!
