Navigációs állapot a React Routerben

Ha rákattintunk a termékekre a listában, láthatjuk, hogy először a termékoldal késéssel töltődik be, majd ezután már gyorsan, ugyanez történik a termék hozzáadásakor és frissítésekor is, mivel van kliens oldali gyorsítótárunk.

Ebben a leckében megmutatjuk a felhasználónak, milyen állapotban van az oldalunk. Ebben segíthet a useNavigation hook. Ez a hook egy objektumot ad vissza számos tulajdonsággal. Az egyik fog érdekelni minket - a state tulajdonság.

A state tulajdonságnak 3 értéke lehet: 'idle' (semmi sem történik), 'submitting' (amikor egy POST, PUT, PATCH vagy DELETE űrlapküldés során a route action-je hívódik meg), 'loading' (amikor a következő route betöltője hívódik meg, hogy megjelenítse a következő oldalt). Minket az utolsó érték fog érdekelni.

Lépjünk be a root.jsx fájlba és importáljuk ezt a hookot:

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

Ezután a hook által visszaadott eredményhez hozzunk létre egy navigation változót a Root függvényben - a return előtt:

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

És most használjuk fel annak state tulajdonságát: ha az értéke 'loading', akkor beállítjuk a loading osztályt annak a div-nek, amelyben a termék adatainak megjelenítése történik:

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

Már csak a loading osztályhoz tartozó stílusokat kell hozzáadnunk a index.css fájlhoz. Állítsuk be a betöltési állapot során egyszerűen a opacity (áttetszőség) növelését:

div.loading {
	opacity: 0.3;
}

Most, ha újratöltjük az oldalt, és rákattintunk a termékekre a listában, vagy például hozzáadunk egy új terméket, látni fogjuk, hogy az aktuális oldal egy pillanatra halvánnyá válik, mielőtt a következő megjelenne.

Vegyétek azt az alkalmazást, amit az előző leckékhez tartozó feladatokban készítettetek. A lecke anyagát felhasználva, a useNavigation hook segítségével oldjátok meg, hogy a felhasználó láthassa, amikor a következő diák adatokat tartalmazó oldal betöltődik.