perf: lazy load admin and me routes with Suspense

client/src/app/routes/index.tsx

@@ -1,22 +1,34 @@
+import { lazy, Suspense } from 'react'
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { MainLayout } from '@/app/layout/MainLayout'
 import { AboutPage } from '@/pages/about'
-import { AdminLayoutPage } from '@/pages/admin-layout'
+// import { AdminLayoutPage } from '@/pages/admin-layout'
 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 { MeLayoutPage } from '@/pages/me'
+// import { MeLayoutPage } from '@/pages/me'
 import { PrivacyPolicyPage } from '@/pages/privacy-policy'
 import { ProductPage } from '@/pages/product'
+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 })))
 
 export function AppRoutes() {
   return (
     <MainLayout>
       <Routes>
         <Route path="/" element={<HomePage />} />
-        <Route path="/admin/*" element={<AdminLayoutPage />} />
+        <Route
+          path="/admin/*"
+          element={
+            <Suspense fallback={<SkeletonPage />}>
+              <AdminLayoutPage />
+            </Suspense>
+          }
+        />
         <Route path="/auth" element={<AuthPage />} />
         <Route path="/auth/callback" element={<AuthCallbackPage />} />
         <Route path="/cart" element={<CartPage />} />
@@ -24,7 +36,14 @@ export function AppRoutes() {
         <Route path="/about" element={<AboutPage />} />
         <Route path="/info" element={<InfoPage />} />
         <Route path="/privacy" element={<PrivacyPolicyPage />} />
-        <Route path="/me/*" element={<MeLayoutPage />} />
+        <Route
+          path="/me/*"
+          element={
+            <Suspense fallback={<SkeletonPage />}>
+              <MeLayoutPage />
+            </Suspense>
+          }
+        />
         <Route path="/products/:id" element={<ProductPage />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

client/src/shared/ui/SkeletonPage.tsx

@@ -0,0 +1,14 @@
+import Box from '@mui/material/Box'
+import Skeleton from '@mui/material/Skeleton'
+
+export function SkeletonPage() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, py: 3 }}>
+      <Skeleton variant="text" width="40%" height={48} />
+      <Skeleton variant="rectangular" height={200} sx={{ borderRadius: 2 }} />
+      <Skeleton variant="text" width="60%" />
+      <Skeleton variant="text" width="80%" />
+      <Skeleton variant="text" width="50%" />
+    </Box>
+  )
+}