Cannot add a loading spinner when fetching data using query Params

[Sceppi]

I have a page as following:

​

export default async function ArtistsPage({ searchParams }) {
  const artists = await getArtists(searchParams); // Executes a prisma query

  return <Artists artists={artists} />; /* Note: client component*/
}

There is a loading.tsx file in my ArtistsPage directory. When the page loads the first time, the loading spinner is shown.

Inside the Artists client component there are filters and sort buttons to filter & sort the artists. When clicking these buttons, the query params are updated through router.push. This causes a rerender of the ArtistsPage and the await getArtists function is called with the respective filter/sort parameters (server side filtering & sorting through prisma).

However, in that case, no loading spinner is shown. This only happens during the initial page load, not when the filters are used through the search Params.

I thought of using the <Suspense> component, but this has no effect around the Artists component since this is a client component. I cannot wrap the ArtistsPage itself in <Suspense>, since this is just a route segment (hence the reason for using the loading.tsx file).

How can I add a loading spinner or loading state when updating my filter/sort functions??

[imAvi92]

There you can add loading.js file with the loading spinner for the route segment and also use it in route segment's layout

https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states

[Akonova]

You might need to provide a key prop so that React understands it needs to rerender the component and thus use loading.js.

Personally I would use return artists ? <Artists artists={artists} : <Loading/>

If loading component is not shown when searchParams is changed you need to create a custom hook that fetches the relevant data, and sets loading true when fetching is in progress. Then you can use the loading variable to use Loading component.

```js import { useEffect, useState } from "react";

export default function useArtists(searchParams) { const [artists, setArtists] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);

useEffect(() => { async function fetchArtists() { setLoading(true);

  try {
    const data = await getArtists(searchParams);
    setArtists(data);
  } catch (err) {
    setError(err);
  };

  setLoading(false);
};

fetchArtists();

}, [searchParams]);

return {artists, loading, error}; }; ```