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•7mo ago

Loading.js page

Neto•7mo ago

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.

Neto•7mo ago

It’s a fancy Suspense

Y7YAOP•7mo ago

I'm aware but I don't think this works for this scenario it replaces the component with a fallback

Neto•7mo 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

Y7YAOP•7mo 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•7mo ago

Current next is quite bad at that

michaeldrotar•7mo 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?

Y7YAOP•7mo 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•7mo 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:

Y7YAOP•7mo ago

Yeah I guess it doesn't make sense to rely on SSR for this level of dynamic behaviour 🤔

Gaming

Programming

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