fix: warm lazy routes after startup visibility

src/pages/_layout.tsx

@@ -50,6 +50,7 @@ import {
 } from '@/components/layout/window-controller'
 import { useI18n } from '@/hooks/use-i18n'
 import { useVerge } from '@/hooks/use-verge'
+import { useVisibility } from '@/hooks/use-visibility'
 import { useWindowDecorations } from '@/hooks/use-window'
 import { useThemeMode } from '@/services/states'
 import getSystem from '@/utils/get-system'
@@ -134,6 +135,7 @@ const Layout = () => {
   const navigate = useNavigate()
   const { pathname } = useLocation()
   const isLogsPage = pathname === '/logs'
+  const pageVisible = useVisibility()
   const themeReady = useMemo(() => Boolean(theme), [theme])
 
   const [menuUnlocked, setMenuUnlocked] = useState(false)
@@ -233,7 +235,7 @@ const Layout = () => {
   useLoadingOverlay(themeReady)
 
   useEffect(() => {
-    if (!themeReady) {
+    if (!themeReady || !pageVisible) {
       return
     }
 
@@ -246,7 +248,7 @@ const Layout = () => {
       controller.abort()
       window.clearTimeout(timerId)
     }
-  }, [themeReady])
+  }, [themeReady, pageVisible])
 
   const handleNotice = useCallback(
     (payload: [string, string]) => {

src/pages/_routers.tsx

@@ -60,22 +60,27 @@ const createRoutePreload = (
   load: () => Promise<{ default: ComponentType }>,
   sections?: string | readonly string[],
 ) => {
-  let preloadPromise: Promise<{ default: ComponentType }> | undefined
+  let componentPromise: Promise<{ default: ComponentType }> | undefined
 
-  const startPreload = sections
-    ? async () => {
-        await ensureLanguageSections(sections)
-        return load()
-      }
-    : load
-
-  return () => {
-    preloadPromise ??= startPreload().catch((error) => {
-      preloadPromise = undefined
+  const loadComponent = () => {
+    componentPromise ??= load().catch((error) => {
+      componentPromise = undefined
       throw error
     })
 
-    return preloadPromise
+    return componentPromise
+  }
+
+  if (!sections) {
+    return loadComponent
+  }
+
+  return async () => {
+    const [component] = await Promise.all([
+      loadComponent(),
+      ensureLanguageSections(sections),
+    ])
+    return component
   }
 }
 
@@ -151,8 +156,21 @@ export const navItems = [
   },
 ]
 
+const navigationWarmupPriority = ['/connections', '/logs', '/rules']
+
+const navigationWarmupItems = [...navItems].sort((left, right) => {
+  const leftIndex = navigationWarmupPriority.indexOf(left.path)
+  const rightIndex = navigationWarmupPriority.indexOf(right.path)
+  const leftRank =
+    leftIndex === -1 ? navigationWarmupPriority.length : leftIndex
+  const rightRank =
+    rightIndex === -1 ? navigationWarmupPriority.length : rightIndex
+
+  return leftRank - rightRank
+})
+
 export const preloadNavigationRoutes = async (signal: AbortSignal) => {
-  for (const item of navItems) {
+  for (const item of navigationWarmupItems) {
     if (signal.aborted) {
       return
     }