Move routes to dashboard app

src/apps/dashboard/App.tsx

@@ -1,9 +1,10 @@
+import loadable from '@loadable/component';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import ConnectionRequired from 'components/ConnectionRequired';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
-import { toAsyncPageRoute } from 'components/router/AsyncRoute';
+import { AsyncPageProps, AsyncRoute, toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toRedirectRoute } from 'components/router/Redirect';
 import ServerContentPage from 'components/ServerContentPage';
 
@@ -12,12 +13,24 @@ import { ASYNC_ADMIN_ROUTES } from './routes/_asyncRoutes';
 import { LEGACY_ADMIN_ROUTES } from './routes/_legacyRoutes';
 import AppLayout from './AppLayout';
 
+const DashboardAsyncPage = loadable(
+    (props: { page: string }) => import(/* webpackChunkName: "[request]" */ `./routes/${props.page}`),
+    { cacheKey: (props: AsyncPageProps) => props.page }
+);
+
+const toDashboardAsyncPageRoute = (route: AsyncRoute) => (
+    toAsyncPageRoute({
+        ...route,
+        element: DashboardAsyncPage
+    })
+);
+
 const DashboardApp = () => (
     <Routes>
         <Route element={<ConnectionRequired isAdminRequired />}>
             <Route element={<AppLayout />}>
                 <Route path='dashboard'>
-                    {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
+                    {ASYNC_ADMIN_ROUTES.map(toDashboardAsyncPageRoute)}
                     {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
                 </Route>