Stan nawigacji w React Router

Jeśli klikamy na produkty w liście, widzimy, że za pierwszym razem strona z produktem ładuje się z opóźnieniem, a przy kolejnych już szybko, to samo przy dodawaniu i aktualizacji produktu, ponieważ mamy cache po stronie klienta.

W tej lekcji pokażemy użytkownikowi w jakim stanie znajduje się nasza strona. W tym może nam pomóc huk useNavigation. Wynikiem swojej pracy ten huk zwraca obiekt z szeregiem właściwości. Nas będzie interesować jedna z nich - właściwość state.

Właściwość state może mieć 3 wartości: 'idle' (nic się nie dzieje), 'submitting' (gdy przy wysyłaniu formularza przez POST, PUT, PATCH lub DELETE wywołano action trasy), 'loading' (gdy wywołano loader dla następnej trasy, aby wyrenderować następną stronę). Nas będzie interesować ostatnia wartość.

Wejdźmy do pliku root.jsx i zaimportujmy ten huk:

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

Następnie, dla zwracanego przez huk wyniku, utwórzmy zmienną navigation w funkcji Root - przed return:

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

A teraz wykorzystajmy jej właściwość state, jeśli będzie to wartość 'loading', to ustawimy klasę loading dla diva, w którym u nas odbywa się renderowanie danych produktu:

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

Pozostało nam dodać stylów dla klasy loading w index.css. W przypadku stanu ładowania po prostu zwiększmy opacity:

div.loading {
	opacity: 0.3;
}

Teraz, jeśli, przeładowawszy stronę, klikać na produkty w liście lub, na przykład, dodać nowy produkt, zobaczymy, że bieżąca strona na jakiś moment zblednie, zanim pojawi się następna.

Weź aplikację, stworzoną przez ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, przy pomocy huka useNavigation spraw, aby użytkownik mógł widzieć, że następna strona z danymi studenta się ładuje.