React Routerда навигация ҳолати

Агар биз рўйхатдан маҳсулотларни боссак, биринчи бор маҳсулот саҳифаси кечиктириш билан юкланганини кўрамиз, қолганларида энди тез, шунингдек маҳсулот қўшганда ва янголаганда ҳам, чунки бизда мижоз томонида кеш мавжуд.

Ушбу дарсда биз фойдаланувчига бизнинг саҳифамизнинг ҳолати қандай эканини кўрсатамиз. Буда бизга useNavigation ҳук ёрдам белади. Уз ишининг натижаси сифатида бу ҳук бир нечта хусусиятларга эга бўлган объектни қайтаради. Бизни унгинг битта хусусияти - state хусусияти қизиктиради.

state хусусияти 3 қийматга эга бўлиши мумкин: 'idle' (ҳеч нарса бўлмаяпти), 'submitting' (шакл POST, PUT, PATCH ёки DELETE орқали юборилганда ва action йўналиши чақирилганда), 'loading' (кейинги йўналиш учун юклагич чақирилганда, кейинги саҳифани рендер қилиш учун). Бизни оксирги қиймат қизиктиради.

Келинг root.jsx файлига кириб, ушбу ҳукни импорт қиламиз:

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

Сўнгра, ҳук қайтарган натижа учун, Root функциясида navigation ўзгарувчисини эълон қиламиз - return дан олдин:

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

Энди унинг state хусуятидан фойдаланамиз, агар у 'loading' қийматга тенг бўлса, у ҳолда биз маҳсулот маълумотлари рендер қилинаётган див учун loading синфини ўрнатамиз:

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

Бизга loading синфи учун index.css да стиллар қўшиш қолди. Келинг юклаш ҳолатида жудо opacity ни оширамиз:

div.loading {
	opacity: 0.3;
}

Энди, агар сайти қайта юклаб, рўйхатдан маҳсулотларни боссак ёки, масалан, янги маҳсулот қўшсак, биз кейинги саҳифа пайдо бўлишидан олдин жарий саҳифа бир оз ўчук-ўчук бўлишини кўрамиз.

Утган дарслардаги вазифаларда яратган иловангизни олинг. Дарс материалларидан фойдаланиб, useNavigation ҳуки ёрдамида фойдаланувчи кейинги талаба маълумотлари саҳифаси юкланмоқда эканини кўра олсин.