Unify routers and use lazy for app layouts

src/apps/dashboard/AppLayout.tsx

@@ -13,23 +13,20 @@ import { useApi } from 'hooks/useApi';
 
 import AppTabs from './components/AppTabs';
 import AppDrawer from './components/drawer/AppDrawer';
+import { DASHBOARD_APP_PATHS } from './routes/routes';
 
 import './AppOverrides.scss';
 
-interface AppLayoutProps {
-    drawerlessPaths: string[]
-}
+const DRAWERLESS_PATHS = [ DASHBOARD_APP_PATHS.MetadataManager ];
 
-const AppLayout: FC<AppLayoutProps> = ({
-    drawerlessPaths
-}) => {
+export const Component: FC = () => {
     const [ isDrawerActive, setIsDrawerActive ] = useState(false);
     const location = useLocation();
     const { user } = useApi();
 
     const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
     const isDrawerAvailable = Boolean(user)
-        && !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
+        && !DRAWERLESS_PATHS.some(path => location.pathname.startsWith(`/${path}`));
     const isDrawerOpen = isDrawerActive && isDrawerAvailable;
 
     const onToggleDrawer = useCallback(() => {
@@ -86,5 +83,3 @@ const AppLayout: FC<AppLayoutProps> = ({
         </Box>
     );
 };
-
-export default AppLayout;

src/apps/dashboard/routes/routes.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { RouteObject } from 'react-router-dom';
-import AppLayout from '../AppLayout';
 import ConnectionRequired from 'components/ConnectionRequired';
 import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import { LEGACY_ADMIN_ROUTES } from './_legacyRoutes';
 import ServerContentPage from 'components/ServerContentPage';
-import ErrorBoundary from '../../../components/router/ErrorBoundary';
+import ErrorBoundary from 'components/router/ErrorBoundary';
 
 export const DASHBOARD_APP_PATHS = {
     Dashboard: 'dashboard',
@@ -20,7 +19,7 @@ export const DASHBOARD_APP_ROUTES: RouteObject[] = [
         element: <ConnectionRequired isAdminRequired />,
         children: [
             {
-                element: <AppLayout drawerlessPaths={[ DASHBOARD_APP_PATHS.MetadataManager ]} />,
+                lazy: () => import('../AppLayout'),
                 children: [
                     {
                         path: DASHBOARD_APP_PATHS.Dashboard,

src/apps/experimental/AppLayout.tsx

@@ -15,7 +15,7 @@ import AppDrawer, { isDrawerPath } from './components/drawers/AppDrawer';
 
 import './AppOverrides.scss';
 
-const AppLayout = () => {
+export const Component = () => {
     const [ isDrawerActive, setIsDrawerActive ] = useState(false);
     const { user } = useApi();
     const location = useLocation();
@@ -76,5 +76,3 @@ const AppLayout = () => {
         </Box>
     );
 };
-
-export default AppLayout;

src/apps/experimental/routes/routes.tsx

@@ -8,8 +8,6 @@ import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import { toRedirectRoute } from 'components/router/Redirect';
 import ErrorBoundary from 'components/router/ErrorBoundary';
 
-import AppLayout from '../AppLayout';
-
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
 import VideoPage from './video';
@@ -17,7 +15,7 @@ import VideoPage from './video';
 export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
     {
         path: '/*',
-        element: <AppLayout />,
+        lazy: () => import('../AppLayout'),
         children: [
             {
                 /* User routes: Any child route of this layout is authenticated */

src/apps/stable/AppRouter.tsx

@@ -1,43 +0,0 @@
-import { History } from '@remix-run/router';
-import React from 'react';
-import { Outlet, RouterProvider, createHashRouter, useLocation } from 'react-router-dom';
-
-import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
-import { STABLE_APP_ROUTES } from './routes/routes';
-import Backdrop from 'components/Backdrop';
-import AppHeader from 'components/AppHeader';
-import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
-import UserThemeProvider from 'themes/UserThemeProvider';
-
-const router = createHashRouter([{
-    element: <StableAppLayout />,
-    children: [
-        ...STABLE_APP_ROUTES,
-        ...DASHBOARD_APP_ROUTES
-    ]
-}]);
-
-export default function StableAppRouter({ history }: Readonly<{ history: History }>) {
-    useLegacyRouterSync({ router, history });
-
-    return <RouterProvider router={router} />;
-}
-
-/**
- * Layout component that renders legacy components required on all pages.
- * NOTE: The app will crash if these get removed from the DOM.
- */
-function StableAppLayout() {
-    const location = useLocation();
-    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
-        .some(path => location.pathname.startsWith(`/${path}`));
-
-    return (
-        <UserThemeProvider>
-            <Backdrop />
-            <AppHeader isHidden={isNewLayoutPath} />
-
-            <Outlet />
-        </UserThemeProvider>
-    );
-}

src/apps/stable/routes/routes.tsx

@@ -16,7 +16,7 @@ import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
 export const STABLE_APP_ROUTES: RouteObject[] = [
     {
         path: '/*',
-        element: <AppLayout />,
+        Component: AppLayout,
         children: [
             {
                 /* User routes */