national-gold

Pending components being rendered based on the tree's hierachy from the root route

What I'm looking to do, is set a common Pending Component at the rootRoute level, so it'd be used for all its child pages unless a child route has a pendingComponent defined. At the moment, a pendingComponent at the rootRoute level does NOT seem to work. Rather, this is what I've currently found to be what works.

export const rootRoute = createRouteConfig({
  pendingComponent: () => <div>parent Loading component</div>, // this doesn't work
  component: () => {
    return (
      <OidcAuthProvider>
        <Outlet />
      </OidcAuthProvider>
    );
  },
});
const agreementsRoute = rootRoute.createRoute({ path: "agreements" });
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "/",
  component: lazy(
    () => import("../pages/AgreementsSearch/AgreementsSearchPage")
  ),
  pendingComponent: () => <div>Loading component</div>
});
export const routeConfig = rootRoute.addChildren([ ... ]);

export const rootRoute = createRouteConfig({
  pendingComponent: () => <div>parent Loading component</div>, // this doesn't work
  component: () => {
    return (
      <OidcAuthProvider>
        <Outlet />
      </OidcAuthProvider>
    );
  },
});
const agreementsRoute = rootRoute.createRoute({ path: "agreements" });
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "/",
  component: lazy(
    () => import("../pages/AgreementsSearch/AgreementsSearchPage")
  ),
  pendingComponent: () => <div>Loading component</div>
});
export const routeConfig = rootRoute.addChildren([ ... ]);

My intention would result in something like this in the end.

export const rootRoute = createRouteConfig({
  component: () => {
    return (
      <OidcAuthProvider>
        <Outlet />
      </OidcAuthProvider>
    );
  },
  pendingComponent: () => <div>Loading component</div>,
});
const agreementsRoute = rootRoute.createRoute({ path: "agreements" });
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "/",
  component: lazy(
    () => import("../pages/AgreementsSearch/AgreementsSearchPage") // uses the parent loader
  ),
});
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "$agreementId",
  component: lazy(
    () => import("../pages/AgreementView/AgreementViewPage")
  ),
  pendingComponent: () => <div>AgreementViewPage Loader component</div>
});
export const routeConfig = rootRoute.addChildren([ ... ]);

export const rootRoute = createRouteConfig({
  component: () => {
    return (
      <OidcAuthProvider>
        <Outlet />
      </OidcAuthProvider>
    );
  },
  pendingComponent: () => <div>Loading component</div>,
});
const agreementsRoute = rootRoute.createRoute({ path: "agreements" });
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "/",
  component: lazy(
    () => import("../pages/AgreementsSearch/AgreementsSearchPage") // uses the parent loader
  ),
});
const agreementsIndexRoute = agreementsRoute.createRoute({
  path: "$agreementId",
  component: lazy(
    () => import("../pages/AgreementView/AgreementViewPage")
  ),
  pendingComponent: () => <div>AgreementViewPage Loader component</div>
});
export const routeConfig = rootRoute.addChildren([ ... ]);

Note: I'm on @tanstack/react-router@0.0.1-beta.38

8 Replies

national-goldOP•3y ago

To summarize: When code-splitting, based on the current route, use the current or closest parent routeConfig's defined pendingComponent (all way upto the rootRoute with the <Outlet />).

national-gold•3y ago

Pass it to the router provider as defaultPendingComponent.

national-goldOP•3y ago

Thank you!

adverse-sapphire•3y ago

@Tanner Linsley Currently it appears the router creates a suspense boundary for each parent route with <Anonymous/> as the fallback if no pendingComponent is provided. It seems more intuitive to just not render the suspense boundary for any route without a pendingComponent , which would then automatically use the nearest suspense boundary.

national-gold•3y ago

That’s a cool idea

adverse-sapphire•3y ago

Should I file an issue to track this?

national-gold•3y ago

Sure!

adverse-sapphire•3y ago

The same idea should be done for errorComponent

Gaming

Programming

Pending components being rendered based on the tree's hierachy from the root route

Did you find this page helpful?