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";

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

  function Modals() {
    const modalPath = useLocation().state?.modal as string | undefined;
    const Modal = modalPath ? modalRoutes[modalPath] : undefined;

    if (!Modal) {
      return null;
    }

    return <Modal />;
  }

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

  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,
  };
}