Lazy load app routes
This commit is contained in:
schroda
142
src/App.tsx
142
src/App.tsx
@@ -11,35 +11,39 @@ import CssBaseline from '@mui/material/CssBaseline';
|
||||
import React, { useLayoutEffect } from 'react';
|
||||
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
|
||||
import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
|
||||
import { loadable } from 'react-lazily/loadable';
|
||||
import { AppContext } from '@/components/context/AppContext';
|
||||
import { Browse } from '@/screens/Browse';
|
||||
import { DownloadQueue } from '@/screens/DownloadQueue';
|
||||
import { Library } from '@/screens/Library';
|
||||
import { Manga } from '@/screens/Manga';
|
||||
import { Reader } from '@/screens/Reader';
|
||||
import { SearchAll } from '@/screens/SearchAll';
|
||||
import { Settings } from '@/screens/Settings';
|
||||
import { About } from '@/screens/settings/About';
|
||||
import { Backup } from '@/screens/settings/Backup';
|
||||
import { Categories } from '@/screens/settings/Categories';
|
||||
import { DefaultReaderSettings } from '@/screens/settings/DefaultReaderSettings';
|
||||
import { SourceConfigure } from '@/screens/SourceConfigure';
|
||||
import { SourceMangas } from '@/screens/SourceMangas';
|
||||
import { Updates } from '@/screens/Updates';
|
||||
import '@/i18n';
|
||||
import { LibrarySettings } from '@/screens/settings/LibrarySettings';
|
||||
import { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
|
||||
import { DownloadSettings } from '@/screens/settings/DownloadSettings.tsx';
|
||||
import { ServerSettings } from '@/screens/settings/ServerSettings.tsx';
|
||||
import { ServerUpdateChecker } from '@/components/util/ServerUpdateChecker.tsx';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { BrowseSettings } from '@/screens/settings/BrowseSettings.tsx';
|
||||
import { WebUISettings } from '@/screens/settings/WebUISettings.tsx';
|
||||
import { Migrate } from '@/screens/Migrate.tsx';
|
||||
import { DeviceSetting } from '@/components/settings/DeviceSetting.tsx';
|
||||
import { TrackingSettings } from '@/screens/settings/TrackingSettings.tsx';
|
||||
import { TrackerOAuthLogin } from '@/screens/TrackerOAuthLogin.tsx';
|
||||
import { WebUIUpdateChecker } from '@/components/util/WebUIUpdateChecker.tsx';
|
||||
import { ServerUpdateChecker } from '@/components/util/ServerUpdateChecker.tsx';
|
||||
import { lazyLoadFallback } from '@/util/LazyLoad.tsx';
|
||||
import { ErrorBoundary } from '@/util/ErrorBoundary.tsx';
|
||||
|
||||
const { Browse } = loadable(() => import('@/screens/Browse'), lazyLoadFallback);
|
||||
const { DownloadQueue } = loadable(() => import('@/screens/DownloadQueue'), lazyLoadFallback);
|
||||
const { Library } = loadable(() => import('@/screens/Library'), lazyLoadFallback);
|
||||
const { Manga } = loadable(() => import('@/screens/Manga'), lazyLoadFallback);
|
||||
const { Reader } = loadable(() => import('@/screens/Reader'), lazyLoadFallback);
|
||||
const { SearchAll } = loadable(() => import('@/screens/SearchAll'), lazyLoadFallback);
|
||||
const { Settings } = loadable(() => import('@/screens/Settings'), lazyLoadFallback);
|
||||
const { About } = loadable(() => import('@/screens/settings/About'), lazyLoadFallback);
|
||||
const { Backup } = loadable(() => import('@/screens/settings/Backup'), lazyLoadFallback);
|
||||
const { Categories } = loadable(() => import('@/screens/settings/Categories'), lazyLoadFallback);
|
||||
const { DefaultReaderSettings } = loadable(() => import('@/screens/settings/DefaultReaderSettings'), lazyLoadFallback);
|
||||
const { SourceConfigure } = loadable(() => import('@/screens/SourceConfigure'), lazyLoadFallback);
|
||||
const { SourceMangas } = loadable(() => import('@/screens/SourceMangas'), lazyLoadFallback);
|
||||
const { Updates } = loadable(() => import('@/screens/Updates'), lazyLoadFallback);
|
||||
const { LibrarySettings } = loadable(() => import('@/screens/settings/LibrarySettings'), lazyLoadFallback);
|
||||
const { DownloadSettings } = loadable(() => import('@/screens/settings/DownloadSettings.tsx'), lazyLoadFallback);
|
||||
const { ServerSettings } = loadable(() => import('@/screens/settings/ServerSettings.tsx'), lazyLoadFallback);
|
||||
const { BrowseSettings } = loadable(() => import('@/screens/settings/BrowseSettings.tsx'), lazyLoadFallback);
|
||||
const { WebUISettings } = loadable(() => import('@/screens/settings/WebUISettings.tsx'), lazyLoadFallback);
|
||||
const { Migrate } = loadable(() => import('@/screens/Migrate.tsx'), lazyLoadFallback);
|
||||
const { DeviceSetting } = loadable(() => import('@/components/settings/DeviceSetting.tsx'), lazyLoadFallback);
|
||||
const { TrackingSettings } = loadable(() => import('@/screens/settings/TrackingSettings.tsx'), lazyLoadFallback);
|
||||
const { TrackerOAuthLogin } = loadable(() => import('@/screens/TrackerOAuthLogin.tsx'), lazyLoadFallback);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// Adds messages only in a dev environment
|
||||
@@ -91,51 +95,55 @@ export const App: React.FC = () => (
|
||||
overflow: 'auto',
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
{/* General Routes */}
|
||||
<Route path="/" element={<Navigate to="/library" replace />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
<Route path="settings">
|
||||
<Route index element={<Settings />} />
|
||||
<Route path="about" element={<About />} />
|
||||
<Route path="categories" element={<Categories />} />
|
||||
<Route path="defaultReaderSettings" element={<DefaultReaderSettings />} />
|
||||
<Route path="librarySettings" element={<LibrarySettings />} />
|
||||
<Route path="downloadSettings" element={<DownloadSettings />} />
|
||||
<Route path="backup" element={<Backup />} />
|
||||
<Route path="server" element={<ServerSettings />} />
|
||||
<Route path="webUI" element={<WebUISettings />} />
|
||||
<Route path="browseSettings" element={<BrowseSettings />} />
|
||||
<Route path="device" element={<DeviceSetting />} />
|
||||
<Route path="trackingSettings" element={<TrackingSettings />} />
|
||||
</Route>
|
||||
<ErrorBoundary>
|
||||
<Routes>
|
||||
{/* General Routes */}
|
||||
<Route path="/" element={<Navigate to="/library" replace />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
<Route path="settings">
|
||||
<Route index element={<Settings />} />
|
||||
<Route path="about" element={<About />} />
|
||||
<Route path="categories" element={<Categories />} />
|
||||
<Route path="defaultReaderSettings" element={<DefaultReaderSettings />} />
|
||||
<Route path="librarySettings" element={<LibrarySettings />} />
|
||||
<Route path="downloadSettings" element={<DownloadSettings />} />
|
||||
<Route path="backup" element={<Backup />} />
|
||||
<Route path="server" element={<ServerSettings />} />
|
||||
<Route path="webUI" element={<WebUISettings />} />
|
||||
<Route path="browseSettings" element={<BrowseSettings />} />
|
||||
<Route path="device" element={<DeviceSetting />} />
|
||||
<Route path="trackingSettings" element={<TrackingSettings />} />
|
||||
</Route>
|
||||
|
||||
{/* Manga Routes */}
|
||||
{/* Manga Routes */}
|
||||
|
||||
<Route path="sources">
|
||||
<Route index element={<Navigate to="/" replace />} />
|
||||
<Route path=":sourceId" element={<SourceMangas />} />
|
||||
<Route path=":sourceId/configure/" element={<SourceConfigure />} />
|
||||
<Route path="all/search/" element={<SearchAll />} />
|
||||
</Route>
|
||||
<Route path="downloads" element={<DownloadQueue />} />
|
||||
<Route path="manga/:id">
|
||||
<Route path="chapter/:chapterNum" element={null} />
|
||||
<Route index element={<Manga />} />
|
||||
</Route>
|
||||
<Route path="library" element={<Library />} />
|
||||
<Route path="updates" element={<Updates />} />
|
||||
<Route path="browse" element={<Browse />} />
|
||||
<Route path="migrate/source/:sourceId">
|
||||
<Route index element={<Migrate />} />
|
||||
<Route path="manga/:mangaId/search" element={<SearchAll />} />
|
||||
</Route>
|
||||
<Route path="tracker/login/oauth" element={<TrackerOAuthLogin />} />
|
||||
</Routes>
|
||||
<Route path="sources">
|
||||
<Route index element={<Navigate to="/" replace />} />
|
||||
<Route path=":sourceId" element={<SourceMangas />} />
|
||||
<Route path=":sourceId/configure/" element={<SourceConfigure />} />
|
||||
<Route path="all/search/" element={<SearchAll />} />
|
||||
</Route>
|
||||
<Route path="downloads" element={<DownloadQueue />} />
|
||||
<Route path="manga/:id">
|
||||
<Route path="chapter/:chapterNum" element={null} />
|
||||
<Route index element={<Manga />} />
|
||||
</Route>
|
||||
<Route path="library" element={<Library />} />
|
||||
<Route path="updates" element={<Updates />} />
|
||||
<Route path="browse" element={<Browse />} />
|
||||
<Route path="migrate/source/:sourceId">
|
||||
<Route index element={<Migrate />} />
|
||||
<Route path="manga/:mangaId/search" element={<SearchAll />} />
|
||||
</Route>
|
||||
<Route path="tracker/login/oauth" element={<TrackerOAuthLogin />} />
|
||||
</Routes>
|
||||
</ErrorBoundary>
|
||||
</Container>
|
||||
<Routes>
|
||||
<Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
|
||||
<Route path="*" element={null} />
|
||||
</Routes>
|
||||
<ErrorBoundary>
|
||||
<Routes>
|
||||
<Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
|
||||
<Route path="*" element={null} />
|
||||
</Routes>
|
||||
</ErrorBoundary>
|
||||
</AppContext>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user