diff --git a/src/apps/experimental/routes/asyncRoutes/user.ts b/src/apps/experimental/routes/asyncRoutes/user.ts index 10040cfc8f5..851a7257c31 100644 --- a/src/apps/experimental/routes/asyncRoutes/user.ts +++ b/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 }, diff --git a/src/components/router/AsyncRoute.tsx b/src/components/router/AsyncRoute.tsx index e91f9e21149..34684d47ec4 100644 --- a/src/components/router/AsyncRoute.tsx +++ b/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 + }; + } + }; +};