Hi. I'm building a page that renders a server component inside a Suspense boundary, as shown below.

export default async function Page({
  searchParams,
}: {
  searchParams: Record<string, string>;
}) {
  return (
    <Layout>
      <Suspense fallback={<Loading />}>
        <ServerComponent params={new URLSearchParams(searchParams)} />
      </Suspense>
    </Layout>
  );
}

interface Props {
  params: URLSearchParams;
}
async function ServerComponent ({ params }: Props) {
  let data: PageData[];
  if (params.size === 0) {
    data = await getPageData();
  } else {
    data = await getPageDataFiltered(params);
  }
  if (data.length === 0) {
    return <p>No results for your query</p>;
  }
  return (
    <div className="flex flex-wrap gap-4 justify-between">
      {data.map((product) => (
        <Card key={product.slug} product={product} />
      ))}
    </div>
  );
}

The intended behaviour is:
- User opens page
- Server component begins loading data, Suspense shows loading ui
- Server component finishes loading data, Suspense shows server component result
- User performs an action that calls useRouter().push to add search params to the page route
- Next reloads data, server component loads new data, Suspense shows loading ui
- Server component finishes loading new data, Suspense shows server component result

But instead I get:
- User opens page
- Server component begins loading data, Suspense shows loading ui
- Server component finishes loading data, Suspense shows server component result
- User performs an action that calls useRouter().push to add search params to the page route
- Next reloads data, server component loads new data, Suspense shows previous server component result
- Server component finishes loading new data, Suspense shows server component result

How can I reapply the loading ui in the Suspense?