Suspense confusion

Given the following:

function App() {
  return (
    <>
      <div>Header</div>
      <SuspenseComponent />
      <div>Footer</div>
    </>
  );
}

function SuspenseComponent() {
  const { data } = useSuspenseQuery({
    queryKey: ['key'],
    queryFn: async () => {
      await new Promise((res) => setTimeout(res, 5_000));
      return Math.random();
    },
  });

  return <Suspense fallback={'Loading...'}>{data}</Suspense>;
}

function App() {
  return (
    <>
      <div>Header</div>
      <SuspenseComponent />
      <div>Footer</div>
    </>
  );
}

function SuspenseComponent() {
  const { data } = useSuspenseQuery({
    queryKey: ['key'],
    queryFn: async () => {
      await new Promise((res) => setTimeout(res, 5_000));
      return Math.random();
    },
  });

  return <Suspense fallback={'Loading...'}>{data}</Suspense>;
}

function App() {
  return (
    <>
      <div>Header</div>
      <SuspenseComponent />
      <div>Footer</div>
    </>
  );
}

function SuspenseComponent() {
  const { data } = useSuspenseQuery({
    queryKey: ['key'],
    queryFn: async () => {
      await new Promise((res) => setTimeout(res, 5_000));
      return Math.random();
    },
  });

  return <Suspense fallback={'Loading...'}>{data}</Suspense>;
}

function App() {
  return (
    <>
      <div>Header</div>
      <SuspenseComponent />
      <div>Footer</div>
    </>
  );
}

function SuspenseComponent() {
  const { data } = useSuspenseQuery({
    queryKey: ['key'],
    queryFn: async () => {
      await new Promise((res) => setTimeout(res, 5_000));
      return Math.random();
    },
  });

  return <Suspense fallback={'Loading...'}>{data}</Suspense>;
}

I expected to initially see

Header

Header

Header

Header and

Footer

Footer

Footer

Footer and

Loading...

Loading...

Loading...

Loading... and then after 5 seconds see the random number, but instead I get a blank screen for 5 seconds and then see everything.

I have a reproduction here:
https://stackblitz.com/edit/vitejs-vite-sryzjy?file=src%2FApp.tsx

Am I fundamentally misunderstanding how

useSuspenseQuery

useSuspenseQuery

works?

StackBlitzMichael Wolfenden

Vitejs - Vite (forked) - StackBlitz

Next generation frontend tooling. It's fast!

Suspense confusion

Similar Threads

Similar Threads

Similar Threads