Ability to block initial render while using a loader

[thomasballinger]

I'd like to be able to use a loader in the same component as a useSuspenseQuery and block the render. Today this is possible from routes/__root.tsx but in routes/index.tsx.

@schiller-manuel noted in https://discord.com/channels/719702312431386674/1306383344778346547/1306383344778346547 that

there is a suspense boundary you cannot opt out currently
https://github.com/TanStack/router/blob/main/packages/react-router/src/Match.tsx#L297

What's the thought here, is this fundamentally required? I could see myself keeping my app/routes/__root.tsx as minimal as possible if I wanted this blocking experience to be triggered by using a useSuspenseQuery().

this sound related to #2026?

---

To reproduce this, run

npx degit TanStack/router/examples/react/start-basic-react-query start-basic-react-query
cd start-basic-react-query
npm i

and then replace app/routes/index.tsx with

import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { postsQueryOptions } from "~/utils/posts";

export const Route = createFileRoute("/")({
  component: Home,
});

function Home() {
  const { data } = useSuspenseQuery(postsQueryOptions());
  console.log(data);
  return (
    <div className="p-2">
      <h3>Welcome Home!!!</h3>
    </div>
  );
}

You'll see that the __root.tsx layout loads first, then the index.tsx pops in.

Screen.Recording.2024-11-25.at.4.58.32.PM.mov