How to conditionally handle Suspense
Answered
Northern Wheatear posted this in #help-forum
Northern WheatearOP
I need to conditionally handle suspense. Right now I have used a suspense in my layout.tsx file to wait until my server component loads. Once the component is loaded I dont want that suspense to appear while routing to another pages. How can I implement this?
Answered by Siberian Flycatcher
Checkout this CodeSandbox https://codesandbox.io/p/devbox/pedantic-golick-qg3sj7?file=%2Fapp%2Flayout.jsx
28 Replies
Northern WheatearOP
For some context
The suspense works while the page is initially loading. After that I need to remove the fallback from showing for each route change
Alfonsus Ardani
you can cache the result of dataWrapper so that it always used the cached version on each route change
Northern WheatearOP
Actually its kind of cached because I'm storing that data in a context which is shared with the entire app
Siberian Flycatcher
Hey 👋
Your setup should already work the way you describe.
Your setup should already work the way you describe.
RootLayout does not re-render during soft navigation (route change). So it should show the Suspense fallback during the initial page load, but not when the user navigates to another route using Link or router.push.Northern WheatearOP
Oo okey but this loading component is coming up while im routing to a new page... Its happening only in dev I guess
Let me build and check
Let me build and check
No its showing up on production also
As you have mentioned @Siberian Flycatcher
RootLayout is not rerendering but the children during each page change right?... I think that is causing the suspense to show the fallback while route changesSiberian Flycatcher
Do you have the code on GitHub?
Northern WheatearOP
Nope its a company project so private 😥
Siberian Flycatcher
Do you mind sharing your file structure in a sidebar?
Northern WheatearOP
Sure
Northern WheatearOP
Let me know if you need more context into this
Siberian Flycatcher
Checkout this CodeSandbox https://codesandbox.io/p/devbox/pedantic-golick-qg3sj7?file=%2Fapp%2Flayout.jsx
Answer
Siberian Flycatcher
Notice that Suspense fallback shows up on page load but not on soft navigation.
Northern WheatearOP
Yes I saw.... In my case the header and footer rendered outside this data wrapper... Let me try to reorganise the code and I will let you know
Also thanks a lot for taking so much effort and time to come up with this sandbox â¤ï¸
Ray
Alex got a lot of cool stuff on twitter, you should check it out 😆
Northern WheatearOP
Sure can you share the twitter Id
Yours also😄
Wow... I went through some of the posts
Amazing stuff
Code animations are sick!!
or you found it😂
Northern WheatearOP
This solution worked... In my case I had some components above the DataWrapper which was remouting on route change... That was causing the issue... Thanks a lott!!
Yes sir 😅