I have this code ([repro](https://codesandbox.io/p/devbox/elated-lamport-vlqpc2?workspaceId=ws_2qo1XgZBBgPP7YRb1kkJwz)):

export default async function Home({
  searchParams,
}: {
  searchParams: Promise<SearchParams>;
}) {
  const rawSearchParams = await searchParams;
  console.log("rawSearchParams", rawSearchParams);

  const key = JSON.stringify(rawSearchParams);

  return (
    <div>
      <Suspense fallback={<p>loading filter...</p>}>
        {/* takes 1 sec to load */}
        <FilterWrapper />
      </Suspense>
      <div>
        <p>Title of the card</p>
        <Suspense key={key} fallback={<p>loading card...</p>}>
          {/* takes 3 sec to load */}
          <CardContent rawSearchParams={rawSearchParams} />
        </Suspense>
      </div>
    </div>
  );
}

Without a key on the filter suspense, there's a 1 sec delay before the card suspense is triggered—which then lasts for the remaining 2 sec.

I expected the card suspense to start immediately and persist for the full 3 sec, but that isn’t happening.

While adding a key to the filter suspense can fix the problem, it's not ideal because the search params doesn’t impact the filter values, so the fallback loading is unnecessary.

How can I resolve this issue?