How to trigger Loading UI when searchParams change for the same page
Answered
Barbary Lion posted this in #help-forum
Barbary LionOP
I have a
My question is how can I show loading UI on subsequent searches when already on that page? I've tried using
page.tsx which is a server component and it correctly shows the loading.tsx file on initial page load when refreshing that page or coming from a different page. However, when the user adjusts some fields and re-triggers the same page but with different searchParams, the page shows the old content until the new content is ready, no loading UI is shown.My question is how can I show loading UI on subsequent searches when already on that page? I've tried using
<Suspense> directly but can't get the loading ui/fallback to display after the initial load. Any help would be appreciated, thanks!Answered by Barbary Lion
I found a solution by manually wrapping the page/component in
<Suspense> and using searchParams as the key. Not sure if Next.js purposely doesn't trigger Suspense on searchParams changes or not3 Replies
Barbary LionOP
I found a solution by manually wrapping the page/component in
<Suspense> and using searchParams as the key. Not sure if Next.js purposely doesn't trigger Suspense on searchParams changes or notAnswer
Thank you!
@Barbary Lion I found a solution by manually wrapping the page/component in `<Suspense>` and using `searchParams` as the key. Not sure if Next.js purposely doesn't trigger Suspense on searchParams changes or not
Grass carp
Not 100% sure to understand your problem and your solution, but from what I understand you did what's expected by React: https://react.dev/reference/react/Suspense#resetting-suspense-boundaries-on-navigation