perf: lazy-load all public routes

client/src/app/routes/index.tsx

@@ -1,29 +1,31 @@
 import { lazy, Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
 import { MainLayout } from '@/app/layout/MainLayout'
-import { AboutPage } from '@/pages/about'
-import { AuthCallbackPage, AuthPage } from '@/pages/auth'
-import { CartPage } from '@/pages/cart'
-import { CheckoutPage } from '@/pages/checkout'
-import { HomePage } from '@/pages/home'
-import { InfoPage } from '@/pages/info'
-import { NotFoundPage } from '@/pages/not-found'
-import { PrivacyPolicyPage } from '@/pages/privacy-policy'
-import { ProductPage } from '@/pages/product'
-import { TermsPage } from '@/pages/terms'
 import { usePageTitleReset } from '@/shared/lib/use-page-title'
 import { SkeletonPage } from '@/shared/ui/SkeletonPage'
 
 const AdminLayoutPage = lazy(() => import('@/pages/admin-layout').then((m) => ({ default: m.AdminLayoutPage })))
 const MeLayoutPage = lazy(() => import('@/pages/me').then((m) => ({ default: m.MeLayoutPage })))
 
+const HomePage = lazy(() => import('@/pages/home').then((m) => ({ default: m.HomePage })))
+const AuthPage = lazy(() => import('@/pages/auth').then((m) => ({ default: m.AuthPage })))
+const AuthCallbackPage = lazy(() => import('@/pages/auth').then((m) => ({ default: m.AuthCallbackPage })))
+const CartPage = lazy(() => import('@/pages/cart').then((m) => ({ default: m.CartPage })))
+const CheckoutPage = lazy(() => import('@/pages/checkout').then((m) => ({ default: m.CheckoutPage })))
+const AboutPage = lazy(() => import('@/pages/about').then((m) => ({ default: m.AboutPage })))
+const InfoPage = lazy(() => import('@/pages/info').then((m) => ({ default: m.InfoPage })))
+const PrivacyPolicyPage = lazy(() => import('@/pages/privacy-policy').then((m) => ({ default: m.PrivacyPolicyPage })))
+const TermsPage = lazy(() => import('@/pages/terms').then((m) => ({ default: m.TermsPage })))
+const ProductPage = lazy(() => import('@/pages/product').then((m) => ({ default: m.ProductPage })))
+const NotFoundPage = lazy(() => import('@/pages/not-found').then((m) => ({ default: m.NotFoundPage })))
+
 export function AppRoutes() {
   usePageTitleReset()
 
   return (
     <MainLayout>
       <Routes>
-        <Route path="/" element={<HomePage />} />
+        <Route path="/" element={<Suspense fallback={<SkeletonPage />}><HomePage /></Suspense>} />
         <Route
           path="/admin/*"
           element={
@@ -32,14 +34,14 @@ export function AppRoutes() {
             </Suspense>
           }
         />
-        <Route path="/auth" element={<AuthPage />} />
+        <Route path="/auth" element={<Suspense fallback={<SkeletonPage />}><AuthPage /></Suspense>} />
-        <Route path="/auth/callback" element={<AuthCallbackPage />} />
+        <Route path="/auth/callback" element={<Suspense fallback={<SkeletonPage />}><AuthCallbackPage /></Suspense>} />
-        <Route path="/cart" element={<CartPage />} />
+        <Route path="/cart" element={<Suspense fallback={<SkeletonPage />}><CartPage /></Suspense>} />
-        <Route path="/checkout" element={<CheckoutPage />} />
+        <Route path="/checkout" element={<Suspense fallback={<SkeletonPage />}><CheckoutPage /></Suspense>} />
-        <Route path="/about" element={<AboutPage />} />
+        <Route path="/about" element={<Suspense fallback={<SkeletonPage />}><AboutPage /></Suspense>} />
-        <Route path="/info" element={<InfoPage />} />
+        <Route path="/info" element={<Suspense fallback={<SkeletonPage />}><InfoPage /></Suspense>} />
-        <Route path="/privacy" element={<PrivacyPolicyPage />} />
+        <Route path="/privacy" element={<Suspense fallback={<SkeletonPage />}><PrivacyPolicyPage /></Suspense>} />
-        <Route path="/terms" element={<TermsPage />} />
+        <Route path="/terms" element={<Suspense fallback={<SkeletonPage />}><TermsPage /></Suspense>} />
         <Route
           path="/me/*"
           element={
@@ -48,8 +50,8 @@ export function AppRoutes() {
             </Suspense>
           }
         />
-        <Route path="/products/:id" element={<ProductPage />} />
+        <Route path="/products/:id" element={<Suspense fallback={<SkeletonPage />}><ProductPage /></Suspense>} />
-        <Route path="*" element={<NotFoundPage />} />
+        <Route path="*" element={<Suspense fallback={<SkeletonPage />}><NotFoundPage /></Suspense>} />
       </Routes>
     </MainLayout>
   )