Estado de Navegação no React Router

Se clicarmos nos produtos da lista, vermos que na primeira vez a página do produto é carregada com um atraso, e nas demais vezes já é rápido, o mesmo acontece ao adicionar e atualizar um produto, pois temos um cache do lado do cliente.

Nesta lição, mostraremos ao usuário em que estado nossa página se encontra. Para isso, podemos usar o hook useNavigation. Esse hook retorna um objeto com uma série de propriedades. Estaremos interessados em uma delas - a propriedade state.

A propriedade state pode ter 3 valores: 'idle' (nada está acontecendo), 'submitting' (quando, no envio de um formulário via POST, PUT, PATCH ou DELETE, uma action da rota é chamada), 'loading' (quando o loader para a próxima rota é chamado para renderizar a próxima página). Estaremos interessados no último valor.

Vamos para o arquivo root.jsx e importar este hook:

routes/root.jsximport { useNavigation } from 'react-router-dom';

Em seguida, para o resultado retornado pelo hook, criaremos uma variável navigation na função Root - antes do return:

routes/root.jsxconst { products } = useLoaderData();
const navigation = useNavigation();

E agora vamos usar sua propriedade state. Se o valor for 'loading', definiremos a classe loading para a div onde os dados do produto estão sendo renderizados:

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

Só nos falta adicionar estilos para a classe loading no index.css. Vamos simplesmente aumentar a opacity no estado de carregamento:

index.cssdiv.loading {
  opacity: 0.3;
}

Agora, se recarregarmos o site e clicarmos nos produtos da lista ou, por exemplo, adicionarmos um novo produto, veremos que a página atual ficará levemente transparente por um momento, antes da próxima aparecer.