useSuspenseQuery drops the whole page to the root fallback instead of the card Suspense

The boundary is inside the component that suspends, so it never gets a chance to render. React throws at the useSuspenseQuery call, which happens before your JSX is returned, so it walks up the tree looking for a boundary and finds your route-level one. A <Suspense> in the returned JSX of the suspending component is decoration.

Split it in two:

function StatsCard() {
  return <Suspense fallback={<Skeleton />}><StatsCardInner /></Suspense>
}
function StatsCardInner() {
  const { data } = useSuspenseQuery({ queryKey: ['stats'], queryFn })
  return <Card data={data} />
}

Rule of thumb that has never let me down: the hook and the boundary must live in different components, and the boundary must be the parent.

Worth checking whether you also have a loading.tsx in that route segment, because that is the boundary you are currently hitting. It is convenient for the initial route transition and it is completely the wrong granularity for a single card - once every leaf has its own boundary, the segment-level one should be showing up rarely.

Once you have the boundary in the right place, the next surprise is updates. Change the query key - swap the date range on that card - and you will get the skeleton flashing back over content that was already on screen. Wrap the state change in startTransition and React keeps the old UI up while the new data loads instead of tearing it down. useTransition also hands you an isPending you can use to dim the card.

Also make sure the card is actually being streamed rather than blocking. If a parent server component awaits something before rendering the client card, nothing downstream can flush early no matter how many boundaries you place. The clue is that the whole page appears at once after 700ms rather than in two stages, which is what you described.

Minor thing that bit us: with useSuspenseQuery there is no isLoading to branch on, and data is non-nullable, which is lovely until somebody writes a conditional early return above the hook and then the whole thing explodes on the second render. Keep the inner component boring - hook, then JSX, nothing else.

For anyone finding this later: same thing applies to use(). The boundary has to be above the component that calls it, not returned by it.