how can I display a loading state when router.push takes a while to transition. I have a loading.tsx that works on initial load or when navigating from another page, but not when the user is already on the page and I'm pushing new search parameters.
#router.push loading state
pure ice
fair flumeBOT
Hi @pure ice. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, the loading state during navigation is managed by the App Router, which is "server-centric". This means that a network roundtrip to the server is needed when doing route transitions. The client doesn't know what loading state to render until it communicates with the server. When prefetching is used, both the route to navigate to and the loading UI can be retrieved, making 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 [source (https://github.com/vercel/next.js/issues/58261)].
However, there are some issues reported with the loading state not being triggered when navigating within the same page with different search parameters. This seems to be a known issue with Next.js and is being discussed in the community [source (https://github.com/vercel/next.js/issues/49297), source (https://github.com/vercel/next.js/issues/50302), source (https://github.com/vercel/next.js/issues/42346)].
One workaround suggested by the community is to use a different key for the Suspense component to force React to consider it as a different component each time and show the fallback. This can be done by encoding the search parameters to a string to set a unique key per search, or use Math.random() to have a random key each time and always show the fallback [source (https://github.com/vercel/next.js/issues/43548)].
Another suggestion is to use useTransition to provide a more subtle loading indicator while query params are changing [source (https://github.com/vercel/next.js/issues/49297)].