Merge pull request #4126 from thornbill/async-react-pages

Add async loading of react pages

src/components/AsyncPage.tsx

@@ -0,0 +1,17 @@
+import loadable from '@loadable/component';
+
+interface AsyncPageProps {
+    /** The relative path to the page component in the routes directory. */
+    page: string
+}
+
+/**
+ * Page component that uses the loadable component library to load pages defined in the routes directory asynchronously
+ * with code splitting.
+ */
+const AsyncPage = loadable(
+    (props: AsyncPageProps) => import(/* webpackChunkName: "[request]" */ `../routes/${props.page}`),
+    { cacheKey: (props: AsyncPageProps) => props.page }
+);
+
+export default AsyncPage;

src/routes/asyncRoutes/admin.ts

@@ -0,0 +1,10 @@
+import { AsyncRoute } from '.';
+
+export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
+    { path: 'usernew.html', page: 'user/usernew' },
+    { path: 'userprofiles.html', page: 'user/userprofiles' },
+    { path: 'useredit.html', page: 'user/useredit' },
+    { path: 'userlibraryaccess.html', page: 'user/userlibraryaccess' },
+    { path: 'userparentalcontrol.html', page: 'user/userparentalcontrol' },
+    { path: 'userpassword.html', page: 'user/userpassword' }
+];

src/routes/asyncRoutes/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import AsyncPage from '../../components/AsyncPage';
+
+export interface AsyncRoute {
+    /** The URL path for this route. */
+    path: string
+    /** The relative path to the page component in the routes directory. */
+    page: string
+}
+
+export const toAsyncPageRoute = (route: AsyncRoute) => (
+    <Route
+        key={route.path}
+        path={route.path}
+        element={<AsyncPage page={route.page} />}
+    />
+);
+
+export * from './admin';
+export * from './user';

src/routes/asyncRoutes/user.ts

@@ -0,0 +1,8 @@
+import { AsyncRoute } from '.';
+
+export const ASYNC_USER_ROUTES: AsyncRoute[] = [
+    { path: 'search.html', page: 'search' },
+    { path: 'userprofile.html', page: 'user/userprofile' },
+    { path: 'home.html', page: 'home' },
+    { path: 'movies.html', page: 'movies' }
+];

src/routes/index.tsx

@@ -1,47 +1,28 @@
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { ASYNC_ADMIN_ROUTES, ASYNC_USER_ROUTES, toAsyncPageRoute } from './asyncRoutes';
 import ConnectionRequired from '../components/ConnectionRequired';
 import ServerContentPage from '../components/ServerContentPage';
 import { LEGACY_ADMIN_ROUTES, LEGACY_USER_ROUTES, toViewManagerPageRoute } from './legacyRoutes';
-import UserNew from './user/usernew';
-import Search from './search';
-import UserEdit from './user/useredit';
-import UserLibraryAccess from './user/userlibraryaccess';
-import UserParentalControl from './user/userparentalcontrol';
-import UserPassword from './user/userpassword';
-import UserProfile from './user/userprofile';
-import UserProfiles from './user/userprofiles';
-import Home from './home';
-import Movies from './movies';
 
 const AppRoutes = () => (
     <Routes>
         <Route path='/'>
             {/* User routes */}
             <Route path='/' element={<ConnectionRequired />}>
-                <Route path='search.html' element={<Search />} />
-                <Route path='userprofile.html' element={<UserProfile />} />
-                <Route path='home.html' element={<Home />} />
-                <Route path='movies.html' element={<Movies />} />
-
+                {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
                 {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
             </Route>
 
             {/* Admin routes */}
             <Route path='/' element={<ConnectionRequired isAdminRequired />}>
-                <Route path='usernew.html' element={<UserNew />} />
-                <Route path='userprofiles.html' element={<UserProfiles />} />
-                <Route path='useredit.html' element={<UserEdit />} />
-                <Route path='userlibraryaccess.html' element={<UserLibraryAccess />} />
-                <Route path='userparentalcontrol.html' element={<UserParentalControl />} />
-                <Route path='userpassword.html' element={<UserPassword />} />
+                {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
+                {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
 
                 <Route path='configurationpage' element={
                     <ServerContentPage view='/web/configurationpage' />
                 } />
-
-                {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
             </Route>
 
             {/* Public routes */}