Loading UI not showing
hey folks I'm using the T3 stack with app router I'm fetching some data and on the basis of data I'm generating the component I have wrapped that in a Suspense and I provided a fallback also but until the components aren't ready the loading UI doesn't shows up the page loads with full content here is my code
8 Replies
Ah this is a misuse of Suspense. Here's an example from the next.js docs. You use suspense to wrap child server componts
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
Routing: Loading UI and Streaming | Next.js
Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.
So I can't dynamically create component like I'm doing in the code Well I tried passing a default single component
do I have to pass named component instead
you there @lanc3
yes, that's best practice for server components. Really you'd just need to do
then
so it would not work If I will pass defaualt exported component right
Not too sure what you mean by that, I'd just make a component file for guilds, and the Page function can stay the same with the imported server component with migrated async calls
I understood what I have to do fetch the data in the component not in the page itself right
✅
thanks I will try it if it works I will tell you but fetching the data in the page itself why doesn't work
@lanc3 thank you so much it worked
@lanc3 can you help me with one more thing so with tanstack query when fetch some data and when window goes out of focus and then comes back to focus it revalidate the data how can we get the same behaviour here