Suspend next/dynamic with loading.tsx
Unanswered
Cinnamon posted this in #help-forum
CinnamonOP
Hello!
I am using the github globe from aceternity.
I am importing the heavy World component in next/dynamic
It must be like this, because that code sets up some threejs stuff that needs the window api.
What I want, is for nextjs to deliver and keep showing the loading.tsx for that page, instead of loading it in the background, how could I do this?
I am using the github globe from aceternity.
I am importing the heavy World component in next/dynamic
It must be like this, because that code sets up some threejs stuff that needs the window api.
What I want, is for nextjs to deliver and keep showing the loading.tsx for that page, instead of loading it in the background, how could I do this?
5 Replies
CinnamonOP
const World = dynamic(() => import('./ui/globe').then(mod => ({ default: mod.World })),{
ssr: false
})This is how it is imported, ssr:false as it needs the window api
importing it with React.lazy seems to do the trick I want, but it throws the error that window is undefined, the /ui/globe file is super tricky to modify and it really just needs to be client only.
The loading will now be at the component level, if you want to add a loading state to the globe component you can provide one in the “loading” prop just like
{ssr:false, loading: <YourFallback/>}Your loading.tsx will be shown as long as your page is dynamic. But since you disabled SSR for this specific component this gets sent separately, afaik.
@LuisLl Your loading.tsx will be shown as long as your page is dynamic. But since you disabled SSR for this specific component this gets sent separately, afaik.
CinnamonOP
any way to get the behavior I want? for loading.tsx to be triggered while this component is loading?