Stanje navigacije v React Router

Če kliknemo na izdelke na seznamu, vidimo, da se stran z izdelkom prvič naloži z zamudo, nato pa že hitro, enako velja pri dodajanju in posodabljanju izdelka, saj imamo predpomnilnik na strani odjemalca.

V tej lekciji bomo uporabniku prikazali v kakšnem stanju je naša stran. Pri tem nam lahko pomaga kljuka useNavigation. Rezultat njenega dela je objekt z vrsto lastnosti. Zanimala nas bo ena od njih - lastnost state.

Lastnost state ima lahko 3 vrednosti: 'idle' (nič se ne dogaja), 'submitting' (ko ob pošiljanju obrazca prek POST, PUT, PATCH ali DELETE pokličemo action poti), 'loading' (ko je poklican nalagalnik za naslednjo pot, da izriše naslednjo stran). Zanimala nas bo zadnja vrednost.

Pojdimo v datoteko root.jsx in uvozimo to kljuko:

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

Nato za vrnjeni rezultat kljuke ustvarimo spremenljivko navigation v funkciji Root - pred return:

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

Zdaj pa uporabimo njeno lastnost state, če je to vrednost 'loading', bomo nastavili razred loading za div, v katerem se prikazujejo podatki izdelka:

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

Ostane nam še dodati sloge za razred loading v index.css. Naj v primeru stanja nalaganja preprosto povečamo opacity:

div.loading {
	opacity: 0.3;
}

Zdaj, če po ponovnem nalaganju strani kliknemo na izdelke na seznamu ali na primer dodamo nov izdelek, bomo videli, da bo trenutna stran za nekaj trenutkov zbledela, preden se prikaže naslednja.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva iz lekcije, s pomočjo kljuke useNavigation naredite tako, da lahko uporabnik vidi, da se naslednja stran s podatki študenta nalaga.