shoc-frontend-new/src/routing/app-shell.tsx

import { ComponentType, Suspense } from "react";
import { Outlet, useLocation } from "react-router";
import type { RouteObject } from "react-router";

import type { RouteModule } from "@/routing/route-module";

function Modals({ modalRoutes }: { modalRoutes: Record<string, ComponentType> }) {
  const modalPath = useLocation().state?.modal as string | undefined;
  const Modal = modalPath ? modalRoutes[modalPath] : undefined;

  if (!Modal) {
    return null;
  }

  return <Modal />;
}

export function createAppShellRoute(
  appLayout: RouteModule | undefined,
  modalRoutes: Record<string, ComponentType>,
): Pick<RouteObject, "Component" | "ErrorBoundary" | "loader"> {
  const AppLayout = appLayout?.default ?? Outlet;

  function Layout() {
    return (
      <>
        <AppLayout />
        <Modals modalRoutes={modalRoutes} />
      </>
    );
  }

  function AppShell() {
    const Pending = appLayout?.Pending;

    if (Pending) {
      return (
        <Suspense fallback={<Pending />}>
          <Layout />
        </Suspense>
      );
    }

    return <Layout />;
  }

  return {
    Component: appLayout?.default ? AppShell : Layout,
    ErrorBoundary: appLayout?.Catch,
    loader: appLayout?.Loader,
  };
}