Suspense has made loading of data very slow on page refresh
Unanswered
Belgian Hare posted this in #help-forum
Belgian HareOP
hi everyone, I use suspense in my server component to show loader, but it doesnt work when reloading the page
What could be causing the issue?
<Suspense fallback={<BillLoader />}>
<BillingCardWrapper jobid={jobid}/>
</Suspense>What could be causing the issue?
56 Replies
just to get this right, this is what you want, right?
@B33fb0n3 just to get this right, this is what you want, right?
Belgian HareOP
yes
but nvm it
i think its our issue
huh?
Belgian HareOP
on older commits it works
so our headache 😅
thx for helping tho!
dont you want to solve that issue?
@B33fb0n3 dont you want to solve that issue?
Belgian HareOP
i do, rn looking at things i changed in that commit
alr
@B33fb0n3 alr
Belgian HareOP
but strange, no changes related to that file were done in that commit
its just that the fallback isnt showing up anymore
@B33fb0n3 hmmm looks good for me. You done it nearly like I done it. Can you share a repro?
Belgian HareOP
the repo is private sadly :((
@Belgian Hare the repo is private sadly :((
you can provide a repro only of the specific error?
@B33fb0n3 you can provide a repro only of the specific error?
Belgian HareOP
this doesnt happen on other apis to us, only 1 api
its strange that the billingcard is showing even when data isnt visible
ahh can you remove the data_exists for a moment and fetch everytime?
to test it out
Belgian HareOP
lemme try
same issue
you done it now like this?
console.log('before fetch')
const data = await get("/application/${jobid}/info");
console.log("after fetch", Object.keys(data))add this to it:
await new Promise(resolve => setTimeout(resolve, 2000))@B33fb0n3 add this to it:
tsx
await new Promise(resolve => setTimeout(resolve, 2000))
Belgian HareOP
before the get line?
or replacing it
like this:
console.log('before fetch')
const data = await get("/application/${jobid}/info");
await new Promise(resolve => setTimeout(resolve, 2000))
console.log("after fetch", Object.keys(data))give me a moment...
it looks like I couldn't reproduce the issue: https://codesandbox.io/p/devbox/zmss8g
So either share your own repro (only the issue itself) or update my existing one
So either share your own repro (only the issue itself) or update my existing one
@B33fb0n3 it looks like I couldn't reproduce the issue: https://codesandbox.io/p/devbox/zmss8g
So either share your own repro (only the issue itself) or update my existing one
Belgian HareOP
phew found the bug!!!!!!!!!!!!!!!!!!
dynamic import*
how else do i import it?
if i dont load it dynamically then i'll get this err
@Belgian Hare if i dont load it dynamically then i'll get this err
check the server console whats the error serverside
@Belgian Hare Click to see attachment
we need your server log. The browser console and the browser network tab is all inside the browser (client). Check the server console (where you started your server)
import html2pdf from "html2pdf.js";thats causing it
hm idk the library sorry
Belgian HareOP
btw @B33fb0n3 , any idea about this error?
it happens on every deploy
i have to redeploy to fix it
@Belgian Hare btw <@301376057326567425> , any idea about this error?
it looks like the module "@lshr/primsa" or it's corresponding type declarations cannot be found. So either add it or remove the import