Merge pull request #5801 from thornbill/no-lazy-home

src/apps/experimental/routes/asyncRoutes/user.ts

@@ -1,10 +1,15 @@
+import loadable from '@loadable/component';
 import { AsyncRoute, AsyncRouteType } from '../../../../components/router/AsyncRoute';
 
 export const ASYNC_USER_ROUTES: AsyncRoute[] = [
+    {
+        path: 'home.html',
+        // FIXME: The use of tab manager for the home screen breaks when using lazy route handling
+        Component: loadable(() => import('../home'))
+    },
     { path: 'quickconnect', page: 'quickConnect' },
     { path: 'search.html', page: 'search' },
     { path: 'userprofile.html', page: 'user/userprofile' },
-    { path: 'home.html', page: 'home', type: AsyncRouteType.Experimental },
     { path: 'movies.html', page: 'movies', type: AsyncRouteType.Experimental },
     { path: 'tv.html', page: 'shows', type: AsyncRouteType.Experimental },
     { path: 'music.html', page: 'music', type: AsyncRouteType.Experimental },

src/components/router/AsyncRoute.tsx

@@ -16,6 +16,8 @@ export interface AsyncRoute {
     page?: string
     /** The page type used to load the correct page element. */
     type?: AsyncRouteType
+    /** Override for pages that don't support lazy importing */
+    Component?: React.ComponentType | null;
 }
 
 const importPage = (page: string, type: AsyncRouteType) => {
@@ -29,12 +31,23 @@ const importPage = (page: string, type: AsyncRouteType) => {
     }
 };
 
-export const toAsyncPageRoute = ({ path, page, type = AsyncRouteType.Stable }: AsyncRoute): RouteObject => ({
+export const toAsyncPageRoute = ({
     path,
-    lazy: async () => {
-        const { default: Component } = await importPage(page ?? path, type);
-        return {
-            Component
-        };
+    page,
+    Component,
+    type = AsyncRouteType.Stable
+}: AsyncRoute): RouteObject => {
+    if (Component) {
+        return { path, Component };
     }
-});
+
+    return {
+        path,
+        lazy: async () => {
+            const { default: Page } = await importPage(page ?? path, type);
+            return {
+                Component: Page
+            };
+        }
+    };
+};