Hello,

Take this client component as an example:

const BlockGeneralInfo = dynamic(
  () => import("./BlockGeneralInfo").then((mod) => mod.BlockGeneralInfo),
  { ssr: false },
);

const BlockInvestment = dynamic(
  () =>
    import("./BlockInvestment").then(
      (mod) => mod.BlockInvestment,
    ),
  { ssr: false },
);

const BlockInfoKyc = dynamic(
  () => import("./BlockInfoKyc").then((mod) => mod.BlockInfoKyc),
  { ssr: false },
);

export function UserContent({
  userId,
}: {
  userId: string;
}) {
  return (
    <Content className="flex max-w-7xl flex-col gap-8">
      <Suspense fallback={<Skeleton />}>
        <BlockGeneralInfo userId={userId} />
        <BlockInfoKyc userId={userId} />
        <BlockInvestment userId={userId} />
      </Suspense>
    </Content>
  );
}

Each block use suspenseQuery() from react query.
I would expect this code to:
- show the 3 blocks at the same time since they are wrapped in a <Suspense />
- show <Skeleton /> during the loading

But the behavior I observe is:
- each block shows when it is loading
- <Skeleton /> is never rendered (I put a console.log in it)

So I don't understand the behavior. I would be grateful if someone can explain it to me,

thank you