Suspense has made loading of data very slow on page refresh

[rain furnace]

hi everyone, I use suspense in my server component to show loader, but it doesnt work when reloading the page

   <Suspense fallback={<BillLoader />}>
          <BillingCardWrapper  jobid={jobid}/>
        </Suspense>

What could be causing the issue?

[indigo raptor]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[rain furnace]

Suspense has made loading of data very slow on page refresh

[tiny zenith]

can you provide whats inside your BillingCardWrapper?

just to get this right, this is what you want, right?

[rain furnace]

yes

but nvm it

i think its our issue

[tiny zenith]

huh?

[rain furnace]

on older commits it works

so our headache 😅

thx for helping tho!

[tiny zenith]

dont you want to solve that issue?

[rain furnace]

i do, rn looking at things i changed in that commit

[tiny zenith]

alr

[rain furnace]

but strange, no changes related to that file were done in that commit

[rain furnace]

its just that the fallback isnt showing up anymore

[tiny zenith]

hmmm looks good for me. You done it nearly like I done it. Can you share a repro?

[rain furnace]

the repo is private sadly :((

[tiny zenith]

you can provide a repro only of the specific error?

[rain furnace]

this doesnt happen on other apis to us, only 1 api

its strange that the billingcard is showing even when data isnt visible

[tiny zenith]

ahh can you remove the data_exists for a moment and fetch everytime?

to test it out

[rain furnace]

lemme try

same issue

[tiny zenith]

you done it now like this?

console.log('before fetch')

const data = await get("/application/${jobid}/info");

console.log("after fetch", Object.keys(data))

[rain furnace]

yes

[tiny zenith]

add this to it:

await new Promise(resolve => setTimeout(resolve, 2000))

[rain furnace]

before the get line?

or replacing it

[tiny zenith]

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))

[rain furnace]

hmm didnt work

[tiny zenith]

give me a moment...

[rain furnace]

ig its not a nextjs issue

it works before that commit

[tiny zenith]

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

[rain furnace]

phew found the bug!!!!!!!!!!!!!!!!!!

dynamic import*

how else do i import it?

if i dont load it dynamically then i'll get this err

[tiny zenith]

check the server console whats the error serverside

[tiny zenith]

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)

[rain furnace]

import html2pdf from "html2pdf.js";

thats causing it

[tiny zenith]

hm idk the library sorry

[rain furnace]

btw @tiny zenith , any idea about this error?

it happens on every deploy

i have to redeploy to fix it