Состояние навигации во React Router

Ако кликнеме на производи во листата, гледаме дека за прв пат страницата со производот се вчитува со одложување, а потоа веќе брзо, истото важи при додавање и ажурирање на производ, бидејќи имаме кеш на клиентската страна.

Во оваа лекција ќе му покажеме на корисникот во каква состојба се наоѓа нашата страница. Во ова може да ни помогне хукот useNavigation. Резултатот од неговата работа овој хук дава објект со низ својства. Нас ќе нè интересира едно од нив - својството state.

Својството state може да има 3 вредности: 'idle' (ништо не се случува), 'submitting' (кога при испраќање на форма преку POST, PUT, PATCH или DELETE е повикан action на рутата), 'loading' (кога е повикан вчитувачот за следната рута, за да се исцрта следната страница). Нас ќе нè интересира последната вредност.

Ајде да одиме во датотеката root.jsx и да го импортираме овој хук:

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

Потоа, за вратениот резултат од хукот, ќе направиме променлива navigation во функцијата Root - пред return:

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

И сега ќе го искористиме нејзиното својство state, ако ова е вредноста 'loading', тогаш ќе поставиме класа loading за div-от во кој се исцртуваат податоците за производот:

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

Останува да додадеме стилови за класата loading во index.css. Ајде во случај на состојба на вчитување едноставно да ја зголемуваме opacity:

div.loading {
	opacity: 0.3;
}

Сега, ако, ја превчитаме страницата, кликнеме на производи во листата или, на пример, додадеме нов производ, ќе видиме дека тековната страница за одреден момент ќе избледи, пред да се појави следната.

Земете ја апликацијата, креирана од вас во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, со помош на хукот useNavigation направете така што корисникот ќе може да види дека следната страница со податоци за студентот се вчитува.