because you are fetching on client component

all you need is turn page.tsx to server component and fetch on server side, you don't need to import the loading.tsx and wrap the children with Suspense which has already handled by next

I think you are fetching the images in useEffect and that doesn't trigger the suspense boundary

if you really want to fetch data in client component, use the react's use

it also triggers the suspense boundary

use cause infinity fetch for me last time I tried

I tried it day before yesterday and it was working fine

it is still causing infinity fetch for me

works fine for me

Oh thanks I did not know this, so it has to be a server component for loading to work? I can't use useState or useEffect in server components.

My thoughts are make a fetch, then you need to save the data into Redux, then display data via useSelector

then loading.tsx won't trigger if you fetch in useEffect, I'd suggest you to fetch it in server component and pass down as prop or the react's use can be called conditionally and inside other functions so you can also give that a shot

Ok so fetch within the page.tsx, then pass it into my Client component which then saves it into Redux?

yes

but give the use a shot if it works

can be helpful

This issue has been solved, thanks!