How to show loading state while refetching?

[julianpera]

Example: https://codesandbox.io/p/sandbox/next-playground-xdr82j

Hi!

As you can see in the example, the loading state is only shown on the first render, but not after the url changes or a refresh is requested.
I like the "optimistic way" of fetching, showing the current state while new data is being fetch, but I would like to show an indicator to the user during the fetching so they know "something is happening". Is it possible?

Also, is it possible for the <Link /> component and the useRouter() hook to force a refresh (ignore client cache) on a redirect like router.refresh() does with the current route? It would be nice to be able to invalidate routes in the client's cache as well.

[Prodito]

Nice catch mate , same question here!

[dustinahudson]

I think I understand how to achieve this. Though, I don't yet understand how it works. It also feels a bit limiting and disconnected. Maybe it's just me.

https://codesandbox.io/p/sandbox/next-playground-forked-33hj45?file=%2Fcomponents%2Fsearch-box.tsx%3A43%2C16

Wrap your router methods in the start transition function from the useTransition hook, then you can control the loading state by isPending value from the same hook.

[masterbater]

Example: https://codesandbox.io/p/sandbox/next-playground-xdr82j

Hi!

As you can see in the example, the loading state is only shown on the first render, but not after the url changes or a refresh is requested. I like the "optimistic way" of fetching, showing the current state while new data is being fetch, but I would like to show an indicator to the user during the fetching so they know "something is happening". Is it possible?

Also, is it possible for the <Link /> component and the useRouter() hook to force a refresh (ignore client cache) on a redirect like router.refresh() does with the current route? It would be nice to be able to invalidate routes in the client's cache as well.

In production you cant really avoid to use client libraries like swr and tanstack query. Maybe use those for your search. But you can do what you want by wrapping with Suspense and you need to move some of your code.

 <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed /> // any component that does async
      </Suspense>

[alibekmslv]

In this particular case you need to use Streaming with Suspense.
You wrap your component that performs an asynchronous action with Suspense:

<Suspense fallback={<p>Loading!</p>}>
  <ComponentThatFetchsData />
</Suspense>

If you use Streaming with Suspense it will load after your main loading.tsx according on how Component Hierarchy works in Next.js App Router

However it's not enough to get visual feedback when we fetch new data. To make fallback component appear on every request, we have to add key prop to Suspense component.

<Suspense key={search} fallback={<p>Loading!</p>}>
  <ComponentThatFetchsData />
</Suspense>

Here is codesandbox link: https://codesandbox.io/p/sandbox/next-playground-forked-zlp7kx

[eneskabacaoglu]

<Suspense key={Math.random()} fallback = {<p>Loading feed...</p>}> worked well for me. Thank you !

[jxzho]

key={Date.now()}

[thomasflensted]

<Suspense key={Math.random()} fallback = {<p>Loading feed...</p>}> worked well for me. Thank you !

I know this is a while ago, but adding a key like @eneskabacaoglu showed solved it for me! I hadn't read up on React Suspense, hence why I didn't know about it. Explanation here.

[Nader-CS]

what about if i need a property to tell me , so i can disable a button while it revalidate ?

[MojoDaHacker]

Is there a way to show a loading state based on the page refreshing?

A use case I have is a basic table that is given data by server component ( page ) and use a form of inputs ( filters ) to update the url and refresh data based on search queries. When the user submits the form, nextjs ( refreshes the page right? With the input's name and value as search queries right? ). So when refreshing the page, the call to fetch the data runs again, but this time the loading screen doesn't appear.

Any solutions or insights?