NextJS detect if page is fetching new data, if so, display loading

So suppose I have this page.tsx
interface DataPropsExampleTypeForReference {
category: string;
products: Product[];
pageInfo: PageInfo;
//... plus many other fields used by all components for various reasons
}

export default function Page() {
const data = await getAsyncData();

return (
<div>
<Breadcrumbs data={data} />
<Products data={data} />
<Pagination data={data} />
</div>
)
}
interface DataPropsExampleTypeForReference {
category: string;
products: Product[];
pageInfo: PageInfo;
//... plus many other fields used by all components for various reasons
}

export default function Page() {
const data = await getAsyncData();

return (
<div>
<Breadcrumbs data={data} />
<Products data={data} />
<Pagination data={data} />
</div>
)
}
Whenever the data is revalidated, as expected all the components update accordingly with the fresh data. I don't want to just simply replace the entire component with a Suspense fallback whilst the data is loading, I want to instead have a greyed out overlay ontop of Products which signifies to the user that the data is loading. What's the best way of achieving this? I hacked together a custom client based solution but surely there's a better pattern that exists for this?
11 Replies
Neto
Neto2mo ago
Loading.js page
Neto
Neto2mo ago
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.
Neto
Neto2mo ago
It’s a fancy Suspense
Y7YA
Y7YA2mo ago
I'm aware but I don't think this works for this scenario it replaces the component with a fallback
Neto
Neto2mo ago
Oh the first load it will block On the next update it fetches as you mutate Update + updated data on the response Not: update, then fetch the new data Unless the router gives you a warning, the suspense boundary is the way to go
Y7YA
Y7YA2mo ago
Notice how the components share the same data though but I only want 1 of them to have a loading overlay I don't want to ever remove the old content whilst the page is loading I only need to display an overlay ontop of the old content until the new content arrives I'm currently researching into useTransition might be the right tool for the job
Neto
Neto2mo ago
Current next is quite bad at that
michaeldrotar
michaeldrotar2mo ago
Sounds like you want something like
<Suspense fallback={<Overlay><Foo data={oldData} /></Overlay>}>
<Foo data={newData} />
</Suspense>
<Suspense fallback={<Overlay><Foo data={oldData} /></Overlay>}>
<Foo data={newData} />
</Suspense>
I'm not sure how to have oldData with the server component but is that the general idea?
Y7YA
Y7YA2mo ago
Well I mean that sounds like something that would work but no clue how I would reliably save the old data. There really needs to be some useIsFetching hook or something
michaeldrotar
michaeldrotar2mo ago
well there is useSWR or useQuery - keeping the current data while fetching is pretty easy if you can do it client-side I'm not coming across any server-side examples that aren't using skeletons :thinkies:
Y7YA
Y7YA2mo ago
Yeah I guess it doesn't make sense to rely on SSR for this level of dynamic behaviour 🤔
Want results from more Discord servers?
Add your server
More Posts