Loading state during navigation (not prefetching)

[nfiacco]

Would love a way to show instant feedback to the user when they navigate between routes that doesn't involve prefetching.

I don't think the point about 100KB loading states is a valid concern. Loading states are often just a spinner. If anything, the default approach should optimize for basic loading states and let people configure something special if they have a special 100KB loading state.

Let me know your thoughts, definitely want to understand how the Next team is thinking about this.

I want to clarify how loading UI works in Next.js.

Routing in the App Router is "server centric". We need a network roundtrip to the server when doing route transitions. The client doesn't know what loading state to render, until it communicates with the server.

When we prefetch, we can retrieve both the route to navigate to and the loading UI. Prefetching is what makes navigations feel snappy. If you prefetch the loading UI which does not have data fetching, then you can "instantly" show this loading state, followed by the dynamic content on the page being streamed in after. This is enabled through React Suspense and streaming server-rendering as part of the App Router.

We don't believe an alternate solution where you include all of the routing variants on the client is feasible or the best solution for Next.js. For example, consider a loading state which is 100kb of HTML / possible routes. Should that be included in the initial JavaScript bundle, blocking interactivity for everything on the page until it's downloaded? Or, is it better to not block interactivity, and load it asynchronously before the next click? We still believe the current model is correct.

There's still opportunities for us to improve the experience of transitioning between loading states. For example, we can optimize further the de-duplication of data. Thanks for the reproductions here, as they'll help us dig in further and find places to optimize.

Originally posted by @leerob in https://github.com/vercel/next.js/issues/43548#issuecomment-1758745511

[philipheinser]

@nfiacco @leerob I agree its a issue and feels like a bug when you use a nexts page. They write in docs:

An instant loading state is fallback UI that is shown immediately upon navigation.

The comment you postet they explain why they cannot show an instant loading state. For us a really simple loading ui that does not need to be 100kb at all would love the issue for us. Right now the user get no feedback at all when clicking a link on slow connection its feels super buggy.

[vankatadam]

@nfiacco @leerob @timneutkens Same here. Another Problem is, that the loading.jsx/tsx is blocked till generateMetadata is ready. This is not a problem in HelloWorld examples, where only static metadata is used, but in dynamic routes you have to firstly fetch your data for your metadata, which can take some time. It's a terrible UX, if the user has to wait for that, till he gets any Loading Feedback on a simple Next Link. Its like wait for 2 Seconds of nothing happening, than for 2 Seconds there is the loading.tsx and than the page loads. Thats almost worse than not having anything and worse than even the standard behavior of a simple where the user atleast sees, that something is happening in his browser bar. It would be great, if we had some control of when we can load our loading.tsx and decide on our own, if it is too big to be prefetched, or atleast be fetched as a first thing that the server does, before generateMetadata. Thanks in advance for your answer, or explanation of the decision behind this implementation

@leerob any updates on this? We could at least listen to router events in the pages router and show a loading state until it finishes. It would be great if there was something similar added to the router in App Router

Here's a short preview of how it breaks the experience and feels like things aren't responding

It makes all the difference compared to how Github does it with a small loading progress indicator.

[nick-barth]

When will this be addressed? I can confirm it's the generateMetadata blocking the loading. What is even more shocking, is that I have the pages built at buildtime via getStaticParms, and this still causing loading blocks.

Other threads that may or may not be involved. https://github.com/vercel/next.js/issues/55524 https://github.com/vercel/next.js/issues/58261 https://github.com/vercel/next.js/issues/43548

[dragos99]

+1 for this. NextJS is a bad user experience until this is addressed.

[AiAutomationAgency]

yes, this is a bad user experience, hhhh, it's really funny, "Nextjs" came to solve and improve the user experience and SEO, It fixed the SEO and made the user experience worse.

[tonyjara]

This is honestly a big pain point and I wish it would get more attention. I've had to do super lightweight skeletons pages to mitigate this problem. It would be so nice to get a simple state update whenever the next page is getting loaded so we can show stuff like a spinner in the button pressed.

[selcukcihan]

Not entirely sure if the pain point described here is the same as the problem I'm trying to solve, but it definitely sounds similar. Google search brought me here. My problem is, I have a single page and I'm using query search parameters to display content for different dates, for instance

localhost:3000 shows todays content localhost:3000?date=2024-06-03 shows yesterday's etc.

I also have a drop down menu that displays available date selections, which are Links of ?date={selectedDate}. My problem is, I want to display a loading spinner when one of those links are clicked, until the page is fully rendered. How can I accomplish this? I've tried the loading.tsx but I think it's not working as it's the same page. For the forms on my page, I'm using useFormStatus to show a loading UI until the app receives a response, I want something similar here. Any ideas?

[patateskafa]

I've been switching to the App Router and learning its tricks for the last 2-3 weeks, and I never questioned whether this could be an actual issue. I kept reading 'An instant loading state is fallback UI that is shown immediately upon navigation' in the docs, tried explicit Suspend wrappers, etc., and couldn't solve it. Impostor syndrome kicked in many times, making me wonder, 'What am I doing wrong here?' until I read the description of this issue. Wow, I'm indeed shocked. I think at least the current behavior and this particular shortcoming of non-prefetched navigation should be mentioned in the docs in CAPITAL LETTERS. instant navigation feedback is one of the simplest yet most impactful details regarding the UX of modern web apps, it's a no-brainer right? anyway, just my 2 cents to emphasize the importance of this. I appreciate all the hard work that goes into Next, so thank you to the hardworking fellas at Vercel (not to the company itself, to the workers only :') )

[leerob]

It sounds like there are few product experiences here where you are all wanting to optimistically show an update, immediately. Is that correct?

For example, looking at this comment. You could useOptimistic here and have isPending to showing a loading animation at the component level. Or you could do a similar "global progress bar" pattern with something like react-transition-progress.

[patateskafa]

hi Lee. there could be many workarounds indeed but, I think most of the people here (+me) are asking for a "native Next" solution regarding the navigation loading state behavior, making it optionally instant (like, "client instant", not "server instant") (after I read this issue I discovered the existence of others i.e. https://github.com/vercel/next.js/issues/43548 )

but even if that's not on the roadmap I think there should at least be a disclaimer in the docs here: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming An instant loading state is fallback UI that is shown immediately upon navigation. is misleading as it's not 100% accurate for non-prefetched scenarios (and sometimes for prefetching as well, if the request fails etc.) and it can save newcomers some time.

[dragos99]

I believe partial prerendering is the native solution to this @patateskafa. Still experimental, but perhaps coming soon 🙏🏼

[rafheros]

Same here, it's kinda strange the user clicks on a Link to navigate and it doesn't respond por 1-2 sec, I've tought I was doing something wrong for some reason. But no it's an actual behavior besides the docs saying that it's "instant" feedback

[leerob]

I can understand that is a frustrating experience. It's hard to provide specific feedback without a code example and a reproduction (ideally a video showing the behavior + URL to test). I can then try and give a suggestion for what you're seeing the delay and solutions (e.g. using loading.tsx or using useOptimistic).

[philipheinser]

It sounds like there are few product experiences here where you are all wanting to optimistically show an update, immediately. Is that correct?

For example, looking at this comment. You could useOptimistic here and have isPending to showing a loading animation at the component level. Or you could do a similar "global progress bar" pattern with something like react-transition-progress.

We should show the user progress right when he clicks. Right now we implementet global progress bar as a workaround but it is not good to do it in user land. We dont know if the site we navigate to is already prefetched or not so the bar always apears even if not needed making the site feel slower. It should be implemented on router level. Even in plain html you have a progress bar from the browser when a new page loads. The default nextjs expierence is worse.

[khanakia]

Any update i have same issue to user it feels like nothing happening when he clicks the Link

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!