#Loading UI when search params change

9 messages · Page 1 of 1 (latest)

peak sinew
#

I have an app that uses pagination with RSC. The query parameters are passed from Next.js straight to an API endpoint which returns the result set.

I can't seem to find a way to show a loading UI when paginating. I have the same issue for things like filters which appear on the page. When clicking a pagination button, I programmatically update the search params (because filters need to stay in place) and use router.replace to update the URL. This works, but the new UI only shows after 1 second or so, because the API isn't fast.

What is the best way to get a loading UI here? Suggestions online seem to only help when fetching data directly on the client, which I don't want.

proven nimbusBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

carmine fossil
#

Hi 👋

You can re-trigger loading fallback when searchParams change by providing a key prop to Suspense with the changing search param.

function MyComponent({searchParams}) {
  return (
    <Suspense
      key={searchParams.prop}
      fallback={// loading ui}>
      <ServerComponent />
    </Suspense>
  )
}```
peak sinew
#

@carmine fossil Thanks Alex! Any way I can build a loading UI that isn't the fallback? For example, if I have a button that changes the search params, I'd love to just show a small spinner inside the button. Something like const isLoading = useNavigationInProgress() ?

carmine fossil
peak sinew
#

Ohhh that looks exactly like what I want! That's great! Thanks 🙂

peak sinew
#

One more follow up if I may: This makes it work nicely with router.replace/push calls. How can I make it work for form submissions?

carmine fossil