Even when using a loading.tsx file and the suspense component, my app still hangs for a few seconds
Unanswered
Gharial posted this in #help-forum
GharialOP
Right now I am working on developing a sort of side project I have going on. I have bunch of different pages for the user, each page has it's own loading.tsx and is wrapped in the suspense component. Even then, I can still count a few seconds without it showing the loading.tsx file, and then it does for maybe half a second. Is this supposed to happen? Is it just a limitation in Nextjs?
I have my loading.tsx files in the root of the 2 different layouts I have in nextjs, and just use the suspense and reference that loading.tsx. Do I perhaps need the loading.tsx in every single route? I dont think I should, that seems overly complicated to do that AND have to wrap it in suspense
I have my loading.tsx files in the root of the 2 different layouts I have in nextjs, and just use the suspense and reference that loading.tsx. Do I perhaps need the loading.tsx in every single route? I dont think I should, that seems overly complicated to do that AND have to wrap it in suspense
8 Replies
Arboreal ant
Any update on this? I have the same problem where suspense does nothing and the app waits for the data without showing any loading component
I believe you're getting confused with navigating state with loading state.
This sort of delay is often encountered when using next dev (via yarn dev or npm dev). This is because when using yarn dev, page is rebuild every time it is requested. So when you navigate back to the index page, Next.js first rebuild that page for you and then it is served. That's why there is a delay.
I'm not sure tho
Arboreal ant
I am using npm, and suspense just doesn't do anything, when reloaded the page and when navigating to it, in both cases suspense doesn't do anything, and in inspect element I can see that it's wrapped in suspense , I've had this problem for a few weeks now #Unknown Channel
hmm, I'm not sure too, I don't use suspense much. the above was just a suggestion since OP said that the loader is showing for some time, but the page is taking time to load.
Arboreal ant
For me, nothing happens, since I am getting data from a third part API it takes around 3 seconds to get the data, and my app waits all 3 to load instead of immediately responding with a loading component and then once it gets the data, it should show it, IT WAIT ALL 3 SECONDS, very bad user experience
yeah, IDK what you're doing wrong, but bad UX indeed