Loading.tsx not working
Unanswered
Bachman's Sparrow posted this in #help-forum
Bachman's SparrowOP
dir structure:
the problem is loading does not show up until the page is rendered, which is kind of useless.
I want the loading to show up instantly after user clicks a link (Link Component) or gets redirected used router.push (useRouter from next/navigation).
What currently happens is, user clicks the link or router.push call is made, I see in the server logs, it says rendering page /dashboard, until then loading is not shown where it should have, then a log message appears, successfully rendered /dashboard, after that loading shows up, but that is too little time, as rendered page is loaded very quickly.
So in final user is in brief time moment where it does not see any loading until page is rendered and then when page is rendered and it starts to load the RENDERED page from the server to client, only in that time frame loading shows up, which is useless. I want the loading to show up when target page is being rendered and loaded.
dashboard/
|- page.tsx
|- loading.tsx
|- layout.tsx
|- error.tsxthe problem is loading does not show up until the page is rendered, which is kind of useless.
I want the loading to show up instantly after user clicks a link (Link Component) or gets redirected used router.push (useRouter from next/navigation).
What currently happens is, user clicks the link or router.push call is made, I see in the server logs, it says rendering page /dashboard, until then loading is not shown where it should have, then a log message appears, successfully rendered /dashboard, after that loading shows up, but that is too little time, as rendered page is loaded very quickly.
So in final user is in brief time moment where it does not see any loading until page is rendered and then when page is rendered and it starts to load the RENDERED page from the server to client, only in that time frame loading shows up, which is useless. I want the loading to show up when target page is being rendered and loaded.
8 Replies
hazamashoken
Recommend using Skeleton and Suspense for serverside
joulev
loading.tsx is just an implicit Suspense, if loading.tsx doesn't work then Suspense doesn't work either
are you using dev mode? to test anything performance-related, use prod mode (npm run build then npm start)
Bachman's SparrowOP
I have tried both and both act same.
is there any env var to set it to run in production mode??
Ray
on production mode, next will prefetch all the url within the viewport if you are using <Link /> which should prefetch the payload for the loading.tsx and it should show up instantly when you try to navigate it.
prefetching is not enable in dev mode, so it may take time to load the loading.tsx
prefetching is not enable in dev mode, so it may take time to load the loading.tsx
run the server in production mode, and check the network tab with the browser dev tools, you should see some request with the loading.tsx content in the response when you load the page
Bachman's SparrowOP
let me deploy and check.