mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Fix home page crashing when using react-router lazy import

Browse source
This commit is contained in:
Bill Thornton 2024-07-16 14:48:56 -04:00
parent cfe6828042
commit 9f61863b7d
2 changed files with 26 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/apps/experimental/routes/asyncRoutes/user.ts
View file

@ -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 },

21
src/components/router/AsyncRoute.tsx
View file

@ -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,
page,
Component,
type = AsyncRouteType.Stable
}: AsyncRoute): RouteObject => {
if (Component) {
return { path, Component };
}
return {
path,
lazy: async () => {
const { default: Component } = await importPage(page ?? path, type);
const { default: Page } = await importPage(page ?? path, type);
return {
Component
Component: Page
};
}
});
};
};