Is Suspense supposed to work with useRouteData?

[Hubro]

Perhaps a silly question. I'm using a lazy loaded component with route data, all inside a Suspense component:

export function routeData() {
  return createServerData$(async () => {
    const prisma = new PrismaClient();

    return await prisma.line.findMany();
  });
}

const AgGridSolid = unstable_clientOnly(() => {
  return import("~/components/AgGridSolid");
});

const BigSpinner = (
  <div class="flex justify-center my-48">
    <div class="w-24 h-24 fill-white">
      <LoadingSpinner />
    </div>
  </div>
);

// ...

const lines = useRouteData<typeof routeData>();

// ...

<Suspense fallback={BigSpinner}>
  <Show when={lines()}>
    <AgGridSolid
      fallback={BigSpinner}
      rowData={lines()}
      ...
    />
  </Show>
</Suspense>

The fallback for the lazy component works perfectly, it renders a nice spinner while the component is loading. However, while loading route data, everything just hangs. I'm testing this by swapping back and forth between two pages. Any time I click the page with this route data defined, the page hangs while the route data is fetching, then it switches to the new page when the route data has been loaded.

Should the Suspense component be working with useRouteData, or have I misunderstood something?

---

Interestingly, if I add a console log statement to the relevant page, it executes immediately. So it seems like Solid Start's router is rendering my component, but it's waiting until the route data is fully loaded before it switches to the page. Why doesn't it switch to the page immediately, showing my spinner? 🤔

[Hubro]

What a coincidence, I happened to tune into Ryan's stream yesterday during a long drive, and he covered this exact topic in depth 😄

So it turns out this is expected (and desired!) behavior. The Solid Start router uses useTransaction (which I agree would be much better named useTransaction) to fork the state of the application while all suspend boundaries resolve. This is to prevent "tearing", which I understood to mean showing an inconsistent view of the state while data is loading. This explains the strange behavior I noticed, where my component would apparently immediately render but not be immediately shown.

I also learned that my desired behavior (instant page navigation + a loading spinner) is considered feeling less responsive than staying on the current page until new data has been loaded, while displaying some kind of progress insicator. This can be achieved with const isRouting = useIsRouting(); as described here.

I'm still curious though, how would I have achieved my desired behavior? I tried moving the suspense boundaries around and I could never get it to work.