Estado de Navegación en React Router

Si hacemos clic en los productos de la lista, vemos que la primera vez la página del producto se carga con retraso, y las siguientes veces más rápido, lo mismo ocurre al añadir y actualizar un producto, ya que tenemos caché en el lado del cliente.

En esta lección mostraremos al usuario en qué estado se encuentra nuestra página. Para ello nos puede ayudar el hook useNavigation. Como resultado de su trabajo, este hook devuelve un objeto con una serie de propiedades. Nos interesará una de ellas: la propiedad state.

La propiedad state puede tener 3 valores: 'idle' (no pasa nada), 'submitting' (cuando al enviar un formulario mediante POST, PUT, PATCH o DELETE se invoca la action de la ruta), 'loading' (cuando se invoca el cargador para la siguiente ruta, para renderizar la siguiente página). Nos interesará el último valor.

Entremos en el archivo root.jsx e importemos este hook:

import { useNavigation } from 'react-router-dom';

Luego, para el resultado devuelto por el hook, creemos una variable navigation en la función Root - antes del return:

const { products } = useLoaderData();
const navigation = useNavigation();

Y ahora aprovechemos su propiedad state: si el valor es 'loading', entonces estableceremos la clase loading para el div en el que se renderizan los datos del producto:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

Solo nos queda añadir estilos para la clase loading en index.css. En caso de estado de carga, simplemente aumentaremos la opacity:

div.loading {
	opacity: 0.3;
}

Ahora, si, recargando el sitio, hacemos clic en los productos de la lista o, por ejemplo, añadimos un nuevo producto, veremos que la página actual durante un momento se volverá tenue, antes de que aparezca la siguiente.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, mediante el hook useNavigation, haga que el usuario pueda ver que la siguiente página con los datos del estudiante se está cargando.