Feature Request: Layout wrapper option for shared structure across component, pendingComponent, and errorComponent

[mt-shihab26]

Problem

When a route needs a shared wrapper (e.g. a page header) across all three states —
component, pendingComponent, and errorComponent — there is no built-in mechanism
to avoid repeating it. Currently you must either:

• Duplicate the wrapper in each state manually
• Create a local Layout component and wrap each state yourself

Example of the current workaround

const Layout = ({ action, children }) => (
    <>
        <Header title="Overview" action={action} />
        <div className="flex flex-col gap-6 p-4 lg:p-6">{children}</div>
    </>
);

export const Route = createFileRoute('/overview')({
    pendingComponent: () => <Layout><Loading /></Layout>,
    errorComponent: ({ error }) => <Layout><RouteError error={error} /></Layout>,
    component: () => <Layout action={<RefreshButton />}>...</Layout>,
});

Suggested API

A layoutComponent (or similar) option that automatically wraps all three states:

export const Route = createFileRoute('/overview')({
    layoutComponent: ({ children }) => (
        <>
            <Header title="Overview" />
            <div className="flex flex-col gap-6 p-4 lg:p-6">{children}</div>
        </>
    ),
    pendingComponent: () => <Loading />,
    errorComponent: ({ error }) => <RouteError error={error} />,
    component: Overview,
});

Why

This is a common need — most routes have a page header that should remain visible
regardless of whether the route is loading, errored, or ready. The workaround works
but adds noise and is easy to forget when adding an errorComponent.

[schiller-manuel]

why don't you use a parent layout route for this?

[mt-shihab26]

I can use that but it's better to have everything in one file. For parent layout I have to make a directory and define two file. I think, this idea is good for simple organization of three state a page can go through.