loading.js does not trigger on dynamic route navigation (within same dynamic route)
Unanswered
Siamese posted this in #help-forum
SiameseOP
Running into an issue with loading.js in app route on nextjs 14.0.1 [Instant loading states section of https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming]
When navigating between the same dynamic route (but with different param), it does not appear to trigger the page loading fallback.
Trying to identify if this is Intentional behavior, A bug, or I incorrectly set something up.
Example of setup:
app/dashboard/page.tsx
app/test/page.tsx
app/link/[linkId]/page.tsx
app/layout.tsx
app/loading.tsx
each page has an artificial 5s await to slow down the rendering
Expected Behavior:
Initial page load to /dashboard = shows loading for ~5s then dashboard component loads
Navigate to /link/A = shows loading after network roundtrip ("instant") for ~5s, then link component loads with params a
Navigate to /link/B = shows loading after network roundtrip for ~5s then link component loads with params b
Navigate to /test = shows loading for ~5s then test component
Navigate to /link/C = shows loading for ~5s then test component
Navigate to /dashboard = shows dashboard immediately (in router cache)
Observed Behavior:
1. Initial page load to /dashboard = shows loading for ~5s then dashboard component loads
2. Navigate to /link/A = shows loading after network roundtrip ("instant") for ~5s, then link component loads with params a
3. Navigate to /link/B = "Hangs" for ~5s then link component loads with params b (no loading component shown) ====ISSUE====
4. Navigate to /test = shows loading for ~5s then test component
5. Navigate to /link/C = shows loading for ~5s then test component
6. Navigate to /dashboard = shows dashboard immediately (in router cache)
Note that step 3 in above does not show the loading fallback as expected. Appears to be an issue when navigating to the "same" dynamic route (but with different params)
Thanks for any help!
When navigating between the same dynamic route (but with different param), it does not appear to trigger the page loading fallback.
Trying to identify if this is Intentional behavior, A bug, or I incorrectly set something up.
Example of setup:
app/dashboard/page.tsx
app/test/page.tsx
app/link/[linkId]/page.tsx
app/layout.tsx
app/loading.tsx
each page has an artificial 5s await to slow down the rendering
Expected Behavior:
Initial page load to /dashboard = shows loading for ~5s then dashboard component loads
Navigate to /link/A = shows loading after network roundtrip ("instant") for ~5s, then link component loads with params a
Navigate to /link/B = shows loading after network roundtrip for ~5s then link component loads with params b
Navigate to /test = shows loading for ~5s then test component
Navigate to /link/C = shows loading for ~5s then test component
Navigate to /dashboard = shows dashboard immediately (in router cache)
Observed Behavior:
1. Initial page load to /dashboard = shows loading for ~5s then dashboard component loads
2. Navigate to /link/A = shows loading after network roundtrip ("instant") for ~5s, then link component loads with params a
3. Navigate to /link/B = "Hangs" for ~5s then link component loads with params b (no loading component shown) ====ISSUE====
4. Navigate to /test = shows loading for ~5s then test component
5. Navigate to /link/C = shows loading for ~5s then test component
6. Navigate to /dashboard = shows dashboard immediately (in router cache)
Note that step 3 in above does not show the loading fallback as expected. Appears to be an issue when navigating to the "same" dynamic route (but with different params)
Thanks for any help!