Any way to split pendingComponent?

[riccox]

Is there any way could realize function like remix, split pendingComponent by outlet.
I have 2 route for example /a/a1 /a/a2, and these 2 pages are under same layout.
If I navigate to /a/a2 from /a/a1, it will trigger whole page into pendingComponent now.
But I wanna make the pendingComponent just render at <Outlet/> position.

[schiller-manuel]

can you please provide a minimal complete example by forking one of the existing examples ?

[riccox]

Navigate to /a/a2 when u are at /a/a1, the page will show a 'loading' by fullscreen.
But I just wanna a loading in <Outlet/> position.

main.tsx :

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider, createRouter } from '@tanstack/react-router';
// Import the generated route tree
import { routeTree } from './routeTree.gen';
// Create a new router instance
const router = createRouter({
  routeTree,
  defaultPendingMs: 150,
  defaultPreload: 'intent',
  defaultPendingComponent: () => (
    <div flex justify-center items-center h-dvh w-dvw>
      loading...
    </div>
  ),
});
// Register the router instance for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}
// Render the app
const rootElement = document.getElementById('root')!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
          <RouterProvider router={router} />
    </React.StrictMode>
  );
}

Layout:

import { Link, Outlet, createFileRoute } from '@tanstack/react-router';
function PageA() {
  return (
        <div className="h-full w-full grid grid-cols-4">
          <div className="p-4 flex flex-col gap-4 border-r">{//...sidebar}</div>
          <div className="col-start-2 -col-end-1">
            <Outlet />
          </div>
        </div>
    );
}
export const Route = createFileRoute('/a/_layout')({
  component: PageA,
});

Page A1:

import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/a/_layout/a1')({
  component: () => <div>Hello page A1!</div>,
  pendingComponent:<div>loading...</div>,
});

Page A2:

import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/a/_layout/a2')({
  component: () => <div>Hello page A2!</div>,
  pendingComponent:<div>loading...</div>,
});

[schiller-manuel]

does this not work as expected?

https://stackblitz.com/edit/tanstack-router-dkpc2f?file=src%2Fmain.tsx,src%2Froutes%2Fa%2F_layout.tsx,src%2Froutes%2Fa%2F_layout%2Fa1.tsx,src%2Froutes%2Fa%2F_layout%2Fa2.tsx,src%2Froutes%2F__root.tsx,src%2Froutes%2Findex.tsx,src%2FrouteTree.gen.ts&preset=node

[riccox]

does this not work as expected?

https://stackblitz.com/edit/tanstack-router-dkpc2f?file=src%2Fmain.tsx,src%2Froutes%2Fa%2F_layout.tsx,src%2Froutes%2Fa%2F_layout%2Fa1.tsx,src%2Froutes%2Fa%2F_layout%2Fa2.tsx,src%2Froutes%2F__root.tsx,src%2Froutes%2Findex.tsx,src%2FrouteTree.gen.ts&preset=node

This demo works fine.
I found the problem is that the main layout take too much time to load (cause I put a fullscreen loader at defaultPendingComponent) after I add mock setTimeout at a1 & a2 pages.

[schiller-manuel]

can you please modify the example to show the problem?

[riccox]

Sry, cannot provide full example code.
There are mass of code in layout PageA component block, they will excute some async or sync logic to load data of sidebar, and these data can not be cache (always changing).
This cause layout will load whole page almost everytime.
I think this is the reason. But I wondering know why does sometime Link navigate will cause this kind of page whole page refresh, sometime just part of page.