Rendering dynamic header component in each page by still leveraging loader function

[zwelhtetyan]

I am rendering <Header /> component in each page since I just want explicit-control. But the problem is, when data-fetching using loader function, the header is not showing since the whole page is loading for data. Can anyone have an idea to use explicit-header in each page by still leveraging loader function form tanstack router. My expectation is to show header without waiting data-fetching to finish. And I also want to pass dynamic data to header like eg for "room-detail-page", the header should show "Dashboard -> Room -> DynamicRoonName".

// (dashboard)/rooms/index.tsx
import { createFileRoute } from "@tanstack/react-router"

import { Rooms } from "@/features/rooms/pages"
import { roomsQueryOptions } from "@/features/rooms/services/query-options"

export const Route = createFileRoute("/_authenticated/(dashboard)/rooms/")({
  loader: ({ context: { queryClient } }) => {
    return queryClient.ensureQueryData(roomsQueryOptions())
  },
  component: Rooms,
})

// features/room/index.tsx
export function Room() {
  return (
    <>
      <Header>
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link to="/">Dashboard</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Rooms</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        <ThemeSwitch />
        <ProfileDropdown />
      </Header>

      <main>
        <div className="mb-10">
          <h2 className="text-2xl font-bold tracking-tight">Rooms</h2>
        </div>

        <div className="grid grid-cols-3 gap-4">
          {rooms.map((room) => (
            <RoomCard key={room.id} room={room} />
          ))}
        </div>
      </main>
    </>
  )
}

[schiller-manuel]

where should the room-detail-page value come from?

aside from that, look into deferred data loading

https://tanstack.com/router/latest/docs/framework/react/guide/deferred-data-loading#deferred-data-loading