Состояние навигации в 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 id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

Нам осталось добавить стилей для класса loading в index.css. Давайте в случае состояния загрузки просто будем увеличивать прозрачность:

div.loading {
	opacity: 0.3;
}

Теперь, если, перезагрузив сайт, покликать на продукты в списке или, например, добавить новый продукт, мы увидим, что текущая страничка на какой-то момент поблекнет, прежде чем появится следующая.