#How to immediately navigate to url and display a loading indicator?

1 messages · Page 1 of 1 (latest)

worldly lark
#

I am using react router 7 for my blogging app and I have completed all the features but I am stuck with an issue of url navigation which is causing a dilema in user. For example I am in my home page with list of different blogs and a user click one of the blogs but the user will not be immediately redirected to the blog detail page untill the data from the server side is rendered completely, and in the server side the api request to get the blog detail runs and the paint the UI with the information on the server side and only user gets back the response and navigated to the detail page. I have tried to implement the loading skeleton using

const navigation = useNavigation();
const isNavigating = navigation.state === "loading";

But the issue is that this checks if the navigation is in loading state and display the loading skeleton of the current page that the user is on not the exact page they are trying to navigate.

frank cape
worldly lark
#

Thank you @frank cape, I have implemented this and also implemented the global spinner in my root file by following this documentation https://reactrouter.com/start/framework/pending-ui , But I am not satisfied with what I have currently and seeking a help from the community if there is an better approach to the solution.

Pending UI
frank cape
#

what are you not satisfied with? that the navigation doesn’t happen immediately with defer?

worldly lark
#

Yes the navigation not happening immediately after clicking a link. In earlier react router version the navigation would happend immediately and I was able to display the loading skeleton based on the UI but now I am not able to display the loading skeleton correctly. As user click the link to /blog from home page the user will get the loading skeleton of home page instead of /blog page untill the data loads from the server.

quick pivot
worldly lark
#

Hey @quick pivot, Thank you for your response. I am not looking for SPA I want to know if there is an similar option in SSR. If there is not an solution to what am I looking for I can continue with the global spinner which shows whenever user tries to navigate which is fine. But was curios if there is a better solution with the community.

quick pivot
#

There's no option in SSR because the client has to wait for the ss rendered doc to load.

The way you can mitigate this is by loading as little as possible on SSR, using skeletons, passing promises to the client from the loaders, and using suspense on the promises from the loaders.

You can also do per route spinners, or even go lower and use spinners in components, instead of a global one:
https://reactrouter.com/tutorials/address-book#global-pending-ui

Address Book
unreal bobcat
#

Actually I would recommend adding pre-render to all links to load faster. I recently did an update to the work website and it runs super faster

Outside of that also added awaits around all pages that used api calls and also good old abort controllers.

worldly lark
#

Hey @quick pivot Thank you for your suggestions.

#

Hey @unreal bobcat Can you provide me a small code block on how can I do pre-render and awaits on all pages?

unreal bobcat