État de navigation dans React Router

Si nous cliquons sur les produits dans la liste, nous voyons que la première fois, la page du produit se charge avec un délai, et les fois suivantes rapidement, la même chose se produit lors de l'ajout et de la mise à jour d'un produit, puisque nous avons un cache côté client.

Dans cette leçon, nous montrerons à l'utilisateur dans quel état se trouve notre page. Le hook useNavigation peut nous y aider. Ce hook renvoie comme résultat un objet avec une série de propriétés. L'une d'elles nous intéressera particulièrement - la propriété state.

La propriété state peut avoir 3 valeurs : 'idle' (rien ne se passe), 'submitting' (lors de l'envoi d'un formulaire via POST, PUT, PATCH ou DELETE, l'action de la route est appelée), 'loading' (lorsque le chargeur pour la route suivante est appelé pour afficher la page suivante). La dernière valeur nous intéressera.

Allons dans le fichier root.jsx et importons ce hook :

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

Ensuite, pour le résultat renvoyé par le hook, déclarons une variable navigation dans la fonction Root - avant le return :

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

Et maintenant, utilisons sa propriété state, si c'est la valeur 'loading', alors nous définirons la classe loading pour la div dans laquelle nos données produit sont affichées :

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

Il ne nous reste plus qu'à ajouter des styles pour la classe loading dans index.css. Dans le cas d'un état de chargement, augmentons simplement l'opacity :

div.loading {
	opacity: 0.3;
}

Maintenant, si, après avoir rechargé le site, nous cliquons sur les produits dans la liste ou, par exemple, ajoutons un nouveau produit, nous verrons que la page actuelle deviendra pâle pendant un moment, avant que la suivante n'apparaisse.

Prenez l'application que vous avez créée dans les tâches des leçons précédentes. En utilisant le matériel de la leçon, à l'aide du hook useNavigation, faites en sorte que l'utilisateur puisse voir que la page suivante avec les données de l'étudiant est en cours de chargement.