I have a loading.jsx file in the /app directory, it works fine when I'm navigating to other pages except the dynamic routed pages. what is the issue?
Note: I am using next.js 14.1.0 for my next.js app.
#loading.jsx is not being rendered in the dynamic routes
hazy sonnet
old brookBOT
Hi @hazy sonnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The issue you're experiencing might be related to how Next.js handles loading states for dynamic routes. According to a comment (https://github.com/vercel/next.js/issues/43548) from a Next.js team member, the client doesn't know what loading state to render until it communicates with the server. This is because routing in the App Router is "server-centric", requiring a network roundtrip to the server when doing route transitions.
When you prefetch, you can retrieve both the route to navigate to and the loading UI. 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.
However, there are known issues with loading states in dynamic routes. For example, there are reports of the parent loading.tsx flashing before the nested loading.tsx in dynamic routes (source (https://github.com/vercel/next.js/issues/43209)), and issues with loading.tsx not being displayed properly in parallel routes (source (https://github.com/vercel/next.js/issues/63793)).
If you're still experiencing issues, it might be helpful to check if these issues apply to your case, or consider opening a new issue in the Next.js GitHub repository with a minimal reproduction of your problem.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
hazy sonnet
Let me rephrase this, I have only one loading.jsx in the /app directory, it loads and working except in the /department/[slug] dynamic route, what is the problem? @old brook
old brookBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the knowledge sources, there are several reported issues with loading states in dynamic routes in Next.js.
One of the issues reported is that the loading component of a dynamic route is not displayed as expected (source (https://github.com/vercel/next.js/issues/45418)). In this case, the loading component is not displayed until the head component has rendered, and the URL is not updated until the head component has rendered.
Another reported issue is that dynamic route segments are not populated in the loading state (source (https://github.com/vercel/next.js/issues/52232)). In this case, the user reported an error when trying to access a dynamic route segment in a loading.js file.
There's also a reported issue where the loading of the current file is not displayed as expected, instead, the parent directory loading page is displayed (source (https://github.com/vercel/next.js/issues/56344)).
These issues might be related to your problem. However, without more specific details about your implementation and the exact behavior you're experiencing, it's hard to provide a more precise answer.