feat(website): reduce white screen time

packages/website/src/router.tsx

@@ -1,10 +1,18 @@
-import { Suspense, useLayoutEffect } from 'react'
+import { Suspense, lazy, useLayoutEffect } from 'react'
 import { Route, Switch, useLocation } from 'wouter'
 
 import Footer from './components/Footer'
 import Header from './components/Header'
+import { useLanguage } from './i18n/context'
 import HomePage from './pages/Home'
-import DocsPages from './pages/docs/index'
+import DocsLayout from './pages/docs/Layout'
+
+const DocsPages = lazy(() => import('./pages/docs/index'))
+
+// Prefetch docs chunk during idle time so navigation feels instant
+if (typeof requestIdleCallback !== 'undefined') {
+	requestIdleCallback(() => import('./pages/docs/index'))
+}
 
 function ScrollToTop() {
 	const [pathname] = useLocation()
@@ -14,6 +22,18 @@ function ScrollToTop() {
 	return null
 }
 
+function DocsLoadingFallback() {
+	const { isZh } = useLanguage()
+	return (
+		<DocsLayout>
+			<div className="flex items-center gap-3 py-12 text-gray-500 dark:text-gray-400">
+				<div className="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+				{isZh ? '文档加载中...' : 'Loading documentation...'}
+			</div>
+		</DocsLayout>
+	)
+}
+
 export default function Router() {
 	return (
 		<div className="flex min-h-screen flex-col">
@@ -32,7 +52,9 @@ export default function Router() {
 
 					<Route path="/docs" nest>
 						<div className="flex-1 bg-white dark:bg-gray-900">
-							<DocsPages />
+							<Suspense fallback={<DocsLoadingFallback />}>
+								<DocsPages />
+							</Suspense>
 						</div>
 					</Route>