Stato della Navigazione in React Router

Se clicchiamo sui prodotti nell'elenco, vediamo che la prima volta la pagina del prodotto viene caricata con un ritardo, e le successive già velocemente, lo stesso quando si aggiunge o aggiorna un prodotto, poiché abbiamo una cache lato client.

In questa lezione mostreremo all'utente in quale stato si trova la nostra pagina. In questo ci può aiutare l'hook useNavigation. Come risultato del suo lavoro, questo hook restituisce un oggetto con una serie di proprietà. Ci interesserà una di esse - la proprietà state.

La proprietà state può avere 3 valori: 'idle' (non sta succedendo nulla), 'submitting' (quando all'invio di un modulo tramite POST, PUT, PATCH o DELETE viene chiamato l'action della route), 'loading' (quando viene chiamato il loader per la route successiva, per renderizzare la pagina successiva). Ci interesserà quest'ultimo valore.

Andiamo nel file root.jsx e importiamo questo hook:

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

Poi, per il risultato restituito dall'hook, creiamo una variabile navigation nella funzione Root - prima del return:

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

E ora utilizziamo la sua proprietà state, se sarà il valore 'loading', allora imposteremo la classe loading per il div in cui avviene il rendering dei dati del prodotto:

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

Ci resta da aggiungere gli stili per la classe loading in index.css. In caso di stato di caricamento, aumentiamo semplicemente la opacity:

div.loading {
	opacity: 0.3;
}

Ora, se, ricaricando il sito, clicchiamo sui prodotti nell'elenco o, ad esempio, aggiungiamo un nuovo prodotto, vedremo che la pagina corrente per un attimo diventerà più trasparente, prima che appaia quella successiva.

Prendi l'applicazione creata da te nei compiti delle lezioni precedenti. Usando i materiali della lezione, tramite l'hook useNavigation fai in modo che l'utente possa vedere che la prossima pagina con i dati dello studente sta venendo caricata.