perf(frontend): eliminate navigation loading states

src/pages/_navigation.tsx

@@ -6,8 +6,7 @@ import LockOpenOutlinedIcon from '@mui/icons-material/LockOpenOutlined'
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
 import SubjectOutlinedIcon from '@mui/icons-material/SubjectOutlined'
 import WifiOutlinedIcon from '@mui/icons-material/WifiOutlined'
-import { Box } from '@mui/material'
-import { lazy, Suspense, type ComponentType, type ReactNode } from 'react'
+import { type ComponentType, type ReactNode } from 'react'
 
 import ConnectionsSvg from '@/assets/image/itemicon/connections.svg?react'
 import HomeSvg from '@/assets/image/itemicon/home.svg?react'
@@ -17,115 +16,24 @@ import ProxiesSvg from '@/assets/image/itemicon/proxies.svg?react'
 import RulesSvg from '@/assets/image/itemicon/rules.svg?react'
 import SettingsSvg from '@/assets/image/itemicon/settings.svg?react'
 import UnlockSvg from '@/assets/image/itemicon/unlock.svg?react'
-import { BaseLoading } from '@/components/base'
-import { ensureLanguageSections } from '@/services/i18n'
 
 import { navigationItems } from './_navigation-meta'
+import ConnectionsPage from './connections'
 import HomePage from './home'
+import LogsPage from './logs'
+import ProfilePage from './profiles'
+import ProxyPage from './proxies'
+import RulesPage from './rules'
+import SettingPage from './settings'
+import UnlockPage from './unlock'
 
 type NavigationItem = {
   label: (typeof navigationItems)[keyof typeof navigationItems]['label']
   path: string
   icon: ReactNode[]
   Component: ComponentType
-  preload?: () => Promise<{ default: ComponentType }>
 }
 
-const waitForWarmupIdle = (signal: AbortSignal) =>
-  new Promise<void>((resolve) => {
-    let idleId: number | undefined
-    let timeoutId: number | undefined
-
-    const cleanup = () => {
-      signal.removeEventListener('abort', finish)
-      if (idleId !== undefined) {
-        window.cancelIdleCallback(idleId)
-      }
-      if (timeoutId !== undefined) {
-        window.clearTimeout(timeoutId)
-      }
-    }
-
-    const finish = () => {
-      cleanup()
-      resolve()
-    }
-
-    if (signal.aborted) {
-      resolve()
-      return
-    }
-
-    signal.addEventListener('abort', finish, { once: true })
-
-    if (window.requestIdleCallback) {
-      idleId = window.requestIdleCallback(finish, { timeout: 500 })
-    } else {
-      timeoutId = window.setTimeout(finish, 120)
-    }
-  })
-
-const createRoutePreload = (
-  load: () => Promise<{ default: ComponentType }>,
-  sections?: string | readonly string[],
-) => {
-  let componentPromise: Promise<{ default: ComponentType }> | undefined
-
-  const loadComponent = () => {
-    componentPromise ??= load().catch((error) => {
-      componentPromise = undefined
-      throw error
-    })
-
-    return componentPromise
-  }
-
-  if (!sections) {
-    return loadComponent
-  }
-
-  return async () => {
-    const [component] = await Promise.all([
-      loadComponent(),
-      ensureLanguageSections(sections),
-    ])
-    return component
-  }
-}
-
-const createLazyRoute = (
-  load: () => Promise<{ default: ComponentType }>,
-  sections?: string | readonly string[],
-) => {
-  const preload = createRoutePreload(load, sections)
-  const Component = lazy(preload)
-  const LazyRoute = () => (
-    <Suspense
-      fallback={
-        <Box
-          sx={{
-            display: 'flex',
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <BaseLoading />
-        </Box>
-      }
-    >
-      <Component />
-    </Suspense>
-  )
-
-  return { Component: LazyRoute, preload }
-}
-
-export const preloadLogsPage = createRoutePreload(
-  () => import('./logs'),
-  'logs',
-)
-
 export const navItems: NavigationItem[] = [
   {
     ...navigationItems.home,
@@ -135,51 +43,36 @@ export const navItems: NavigationItem[] = [
   {
     ...navigationItems.proxies,
     icon: [<WifiOutlinedIcon key="mui" />, <ProxiesSvg key="svg" />],
-    ...createLazyRoute(() => import('./proxies')),
+    Component: ProxyPage,
   },
   {
     ...navigationItems.profiles,
     icon: [<DnsOutlinedIcon key="mui" />, <ProfilesSvg key="svg" />],
-    ...createLazyRoute(() => import('./profiles'), 'rules'),
+    Component: ProfilePage,
   },
   {
     ...navigationItems.connections,
     icon: [<LanguageOutlinedIcon key="mui" />, <ConnectionsSvg key="svg" />],
-    ...createLazyRoute(() => import('./connections'), 'connections'),
+    Component: ConnectionsPage,
   },
   {
     ...navigationItems.rules,
     icon: [<ForkRightOutlinedIcon key="mui" />, <RulesSvg key="svg" />],
-    ...createLazyRoute(() => import('./rules'), 'rules'),
+    Component: RulesPage,
   },
   {
     ...navigationItems.logs,
     icon: [<SubjectOutlinedIcon key="mui" />, <LogsSvg key="svg" />],
-    Component: () => null /* LogsPage rendered in Layout only on /logs route */,
-    preload: preloadLogsPage,
+    Component: LogsPage,
   },
   {
     ...navigationItems.unlock,
     icon: [<LockOpenOutlinedIcon key="mui" />, <UnlockSvg key="svg" />],
-    ...createLazyRoute(() => import('./unlock')),
+    Component: UnlockPage,
   },
   {
     ...navigationItems.settings,
     icon: [<SettingsOutlinedIcon key="mui" />, <SettingsSvg key="svg" />],
-    ...createLazyRoute(() => import('./settings')),
+    Component: SettingPage,
   },
 ]
-
-export const preloadNavigationRoutes = async (signal: AbortSignal) => {
-  await waitForWarmupIdle(signal)
-  if (signal.aborted) {
-    return
-  }
-
-  await Promise.all(
-    navItems.map((item) => {
-      const preload = 'preload' in item ? item.preload : undefined
-      return preload?.().catch(() => {})
-    }),
-  )
-}