diff --git a/package-lock.json b/package-lock.json index 62cbc87dc9..10910e50e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,6 @@ "@fontsource/noto-sans-tc": "5.0.19", "@jellyfin/libass-wasm": "4.2.1", "@jellyfin/sdk": "0.0.0-unstable.202407020501", - "@loadable/component": "5.16.4", "@mui/icons-material": "5.15.19", "@mui/material": "5.15.19", "@mui/x-data-grid": "7.6.1", @@ -4124,27 +4123,6 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, - "node_modules/@loadable/component": { - "version": "5.16.4", - "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.16.4.tgz", - "integrity": "sha512-fJWxx9b5WHX90QKmizo9B+es2so8DnBthI1mbflwCoOyvzEwxiZ/SVDCTtXEnHG72/kGBdzr297SSIekYtzSOQ==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.18", - "hoist-non-react-statics": "^3.3.1", - "react-is": "^16.12.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/@mapbox/node-pre-gyp": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz", @@ -26986,16 +26964,6 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, - "@loadable/component": { - "version": "5.16.4", - "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.16.4.tgz", - "integrity": "sha512-fJWxx9b5WHX90QKmizo9B+es2so8DnBthI1mbflwCoOyvzEwxiZ/SVDCTtXEnHG72/kGBdzr297SSIekYtzSOQ==", - "requires": { - "@babel/runtime": "^7.12.18", - "hoist-non-react-statics": "^3.3.1", - "react-is": "^16.12.0" - } - }, "@mapbox/node-pre-gyp": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz", diff --git a/package.json b/package.json index 6745ab4abe..165fc927f3 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,6 @@ "@fontsource/noto-sans-tc": "5.0.19", "@jellyfin/libass-wasm": "4.2.1", "@jellyfin/sdk": "0.0.0-unstable.202407020501", - "@loadable/component": "5.16.4", "@mui/icons-material": "5.15.19", "@mui/material": "5.15.19", "@mui/x-data-grid": "7.6.1", diff --git a/src/apps/experimental/routes/asyncRoutes/user.ts b/src/apps/experimental/routes/asyncRoutes/user.ts index 851a7257c3..20af699bf1 100644 --- a/src/apps/experimental/routes/asyncRoutes/user.ts +++ b/src/apps/experimental/routes/asyncRoutes/user.ts @@ -1,12 +1,7 @@ -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: 'home.html', page: 'home', type: AsyncRouteType.Experimental }, { path: 'quickconnect', page: 'quickConnect' }, { path: 'search.html', page: 'search' }, { path: 'userprofile.html', page: 'user/userprofile' }, diff --git a/src/apps/experimental/routes/home.tsx b/src/apps/experimental/routes/home.tsx index ae48e60055..f1288b5e0f 100644 --- a/src/apps/experimental/routes/home.tsx +++ b/src/apps/experimental/routes/home.tsx @@ -2,14 +2,13 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { useSearchParams } from 'react-router-dom'; import globalize from '../../../scripts/globalize'; -import LibraryMenu from '../../../scripts/libraryMenu'; import { clearBackdrop } from '../../../components/backdrop/backdrop'; import layoutManager from '../../../components/layoutManager'; -import * as mainTabsManager from '../../../components/maintabsmanager'; +import Page from '../../../components/Page'; + import '../../../elements/emby-tabs/emby-tabs'; import '../../../elements/emby-button/emby-button'; import '../../../elements/emby-scroller/emby-scroller'; -import Page from '../../../components/Page'; type OnResumeOptions = { autoFocus?: boolean; @@ -29,12 +28,14 @@ const Home = () => { const [ searchParams ] = useSearchParams(); const initialTabIndex = parseInt(searchParams.get('tab') ?? '0', 10); + const libraryMenu = useMemo(async () => ((await import('../../../scripts/libraryMenu')).default), []); + const mainTabsManager = useMemo(() => import('../../../components/maintabsmanager'), []); const tabController = useRef(); const tabControllers = useMemo(() => [], []); const element = useRef(null); - const setTitle = () => { - LibraryMenu.setTitle(null); + const setTitle = async () => { + (await libraryMenu).setTitle(null); }; const getTabs = () => { @@ -78,18 +79,6 @@ const Home = () => { }); }, [ tabControllers ]); - const onViewDestroy = useCallback(() => { - if (tabControllers) { - tabControllers.forEach(function (t) { - if (t.destroy) { - t.destroy(); - } - }); - } - - tabController.current = null; - }, [ tabControllers ]); - const loadTab = useCallback((index: number, previousIndex: number | null) => { getTabController(index).then((controller) => { const refresh = !controller.refreshed; @@ -118,19 +107,23 @@ const Home = () => { loadTab(newIndex, previousIndex); }, [ loadTab, tabControllers ]); - const onResume = useCallback(() => { - setTitle(); + const onSetTabs = useCallback(async () => { + (await mainTabsManager).setTabs(element.current, initialTabIndex, getTabs, getTabContainers, null, onTabChange, false); + }, [ initialTabIndex, mainTabsManager, onTabChange ]); + + const onResume = useCallback(async () => { + void setTitle(); clearBackdrop(); const currentTabController = tabController.current; if (!currentTabController) { - mainTabsManager.selectedTabIndex(initialTabIndex); + (await mainTabsManager).selectedTabIndex(initialTabIndex); } else if (currentTabController?.onResume) { currentTabController.onResume({}); } (document.querySelector('.skinHeader') as HTMLDivElement).classList.add('noHomeButtonHeader'); - }, [ initialTabIndex ]); + }, [ initialTabIndex, mainTabsManager ]); const onPause = useCallback(() => { const currentTabController = tabController.current; @@ -141,13 +134,13 @@ const Home = () => { }, []); useEffect(() => { - mainTabsManager.setTabs(element.current, initialTabIndex, getTabs, getTabContainers, null, onTabChange, false); + void onSetTabs(); - onResume(); + void onResume(); return () => { onPause(); }; - }, [ initialTabIndex, onPause, onResume, onTabChange, onViewDestroy ]); + }, [ onPause, onResume, onSetTabs ]); return (
diff --git a/src/components/router/AsyncRoute.tsx b/src/components/router/AsyncRoute.tsx index 34684d47ec..80e393d134 100644 --- a/src/components/router/AsyncRoute.tsx +++ b/src/components/router/AsyncRoute.tsx @@ -16,8 +16,6 @@ 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) => { @@ -34,13 +32,8 @@ const importPage = (page: string, type: AsyncRouteType) => { export const toAsyncPageRoute = ({ path, page, - Component, type = AsyncRouteType.Stable }: AsyncRoute): RouteObject => { - if (Component) { - return { path, Component }; - } - return { path, lazy: async () => {