Stav navigace v React Router

Pokud klikneme na produkty v seznamu, vidíme, že poprvé se stránka s produktem načítá se zpožděním, a podruhé už rychle, to samé při přidání a aktualizaci produktu, protože máme mezipaměť na straně klienta.

V této lekci ukážeme uživateli v jakém stavu se naše stránka nachází. S tím nám může pomoci hook useNavigation. Výsledkem své práce tento hook vydává objekt s řadou vlastností. Bude nás zajímat jedna z nich - vlastnost state.

Vlastnost state může mít 3 hodnoty: 'idle' (nic se neděje), 'submitting' (při odesílání formuláře pomocí POST, PUT, PATCH nebo DELETE byl volán action trasy), 'loading' (když byl volán loader pro následující trasu, aby vykreslil následující stránku). Bude nás zajímat poslední hodnota.

Pojďme do souboru root.jsx a importujme tento hook:

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

Poté pro vrácený výsledek hooku vytvoříme proměnnou navigation ve funkci Root - před return:

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

A nyní využijme její vlastnost state, pokud to bude hodnota 'loading', nastavíme třídu loading pro div, ve kterém se nám provádí vykreslování dat produktu:

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

Zbývá nám přidat styly pro třídu loading v index.css. Pojďme v případě stavu načítání jednoduše zvýšit opacity:

div.loading {
	opacity: 0.3;
}

Nyní, pokud po obnovení stránky klikneme na produkty v seznamu nebo, například, přidáme nový produkt, uvidíme, že aktuální stránka na chvíli zbledne, než se objeví následující.

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. S využitím materiálů lekce pomocí hooku useNavigation zařiďte, aby uživatel mohl vidět, že se další stránka s daty studenta načítá.