Next.js Discord

Discord Forum

How to make loading placeholders snappy?

Unanswered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
I just found this out https://github.com/vercel/next.js/issues/43548
Apparentely loading placeholders are only loaded once a request is made. This is leading to really bad UX for my modals, specially when server usage gets stressed. Users click on a "open modal" and it takes several seconds for the modal loading.tsx to finally appear

Are there any ways to solve this. Ideal solution would be to tell next "please load this placeholder" before the user even clicks the modal... but thats not how Link prefetch works apparentely. I also thought about wrapping the server component in a suspense... but that also does not work.

any ideas?

5 Replies

for me it prefetches it all (so if loading.tsx it loades that)... are you using dev server and not the actual server or do you have prefetch disabled?
Australian Freshwater CrocodileOP
no, its production where we are seeing the issues.
hmm intresting
Australian Freshwater CrocodileOP
In any case, the prefetch is too slow. When the server is under load, it takes several seconds. For something that should be instant. I want the loading placeholder to be done client side basically.
right now the loading is gone, and it still takes about 250ms for the modal to pop, because it only starts poping after the server response arrives. It's a noticible delay. 😦