diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx index 45476cb7f..4266eafc8 100644 --- a/src/pages/_layout.tsx +++ b/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]) => { diff --git a/src/pages/_routers.tsx b/src/pages/_routers.tsx index 27508f3ea..f38d8c52f 100644 --- a/src/pages/_routers.tsx +++ b/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 }