How can I show loading.tsx again on subsequent calls to a dynamic route with different search params?

[bsanuk]

Summary

Hey all, here is my situation:

I have a server component page that fetches data with await, a client component that the page renders when the data is fetched, and a loading.tsx file. Something like:

• search
  • page.tsx
  • view.tsx
  • loading.tsx

The page uses search params when fetching the data.

Current behaviour:

1. User navigates to /search?filter1=foo and loading.tsx is shown while data is being fetched.
2. User clicks some filter, which executes router.push('/search?filter1=foo&filter2=bar')
3. loading.tsx does not render again. The page is idle until data is refreshed, and is updated with new content once finished.

This only happens when re-navigating to /search from within /search. If the user goes to some other page and clicks a link to pointing to /search?filter3=baz the loading animation is shown again, as desired.

Desired behaviour:

1. User navigates to /search?filter1=foo and loading.tsx is shown while data is being fetched.
2. User clicks some filter, which executes router.push('/search?filter1=foo&filter2=bar')
3. loading.tsx is shown again. The page shows the loading animation until data is refreshed, and is updated with new content once finished.

Maybe another way to ask this question is: how can I purge/invalidate the router cache programmatically AND show loading.tsx again/destroy the current client component

I tried to work around the issue using loading overlays that are shown when a filter button is clicked and go away when loading is finished, using state. However this is tedious because its hard to detect when loading finishes.

I am open to other ideas as well, maybe I am thinking about this wrong. Thanks in advance!

[9vitorconti]

Did you get this sorted? I have been trying to make this work the same way

[leog]

Experiencing the same, some guidance please!