From 5ca9bd7ebf30b7a749a64f48e33be061bb886ee9 Mon Sep 17 00:00:00 2001
From: Hermes <root@vm-nano>
Date: Wed, 19 Aug 2026 10:58:39 +0200
Subject: [PATCH] =?UTF-8?q?perf:=20code-split=20routes=20=E2=80=94=20clien?=
 =?UTF-8?q?t=20delivery=20page=20loads=2034KB=20chunk=20instead=20of=20932?=
 =?UTF-8?q?KB=20bundle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- lazy-load all pages via React.lazy + Suspense
- client-facing pages (SMS links) no longer pull DashboardPage (605KB) and admin panels
- fixes 30-40s loads on slow mobile connections (Crimea customers)
---
 src/router.jsx | 82 ++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 63 insertions(+), 19 deletions(-)

diff --git a/src/router.jsx b/src/router.jsx
index f8195f1..a2e7d33 100644
--- a/src/router.jsx
+++ b/src/router.jsx
@@ -1,17 +1,61 @@
 import React from "react";
 import { Navigate, createBrowserRouter, useParams } from "react-router-dom";
 import App from "./App";
-import { ClientDeliveryPage } from "./pages/ClientDeliveryPage";
-import { ClientTestPage } from "./pages/ClientTestPage";
-import { ClientTestConsentPage } from "./pages/ClientTestConsentPage";
-import { DashboardPage } from "./pages/DashboardPage";
-import { GroupDetailPage } from "./pages/GroupDetailPage";
-import { LoginPage } from "./pages/LoginPage";
-import { NotFoundPage } from "./pages/NotFoundPage";
-import { ForbiddenPage } from "./pages/ForbiddenPage";
-import { SettingsPage } from "./pages/SettingsPage";
 import { useAuth } from "./context/AuthContext";
 
+/**
+ * Code-splitting: client-facing pages (opened from SMS links on mobile) load a
+ * small chunk instead of the full 932KB bundle that includes the staff
+ * dashboard, admin panels, etc. This fixes 30-40s loads on slow mobile
+ * connections (customers in Crimea opening delivery links).
+ *
+ * Staff pages are also lazy so the login page stays light.
+ */
+const ClientDeliveryPage = React.lazy(() =>
+  import("./pages/ClientDeliveryPage").then((m) => ({ default: m.ClientDeliveryPage }))
+);
+const ClientTestPage = React.lazy(() =>
+  import("./pages/ClientTestPage").then((m) => ({ default: m.ClientTestPage }))
+);
+const ClientTestConsentPage = React.lazy(() =>
+  import("./pages/ClientTestConsentPage").then((m) => ({ default: m.ClientTestConsentPage }))
+);
+const DashboardPage = React.lazy(() =>
+  import("./pages/DashboardPage").then((m) => ({ default: m.DashboardPage }))
+);
+const GroupDetailPage = React.lazy(() =>
+  import("./pages/GroupDetailPage").then((m) => ({ default: m.GroupDetailPage }))
+);
+const LoginPage = React.lazy(() =>
+  import("./pages/LoginPage").then((m) => ({ default: m.LoginPage }))
+);
+const NotFoundPage = React.lazy(() =>
+  import("./pages/NotFoundPage").then((m) => ({ default: m.NotFoundPage }))
+);
+const ForbiddenPage = React.lazy(() =>
+  import("./pages/ForbiddenPage").then((m) => ({ default: m.ForbiddenPage }))
+);
+const SettingsPage = React.lazy(() =>
+  import("./pages/SettingsPage").then((m) => ({ default: m.SettingsPage }))
+);
+
+const PageLoader = () => (
+  <div
+    style={{
+      minHeight: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "var(--color-text-muted, #888)",
+      fontFamily: "system-ui, sans-serif",
+    }}
+  >
+    Загрузка…
+  </div>
+);
+
+const withSuspense = (node) => <React.Suspense fallback={<PageLoader />}>{node}</React.Suspense>;
+
 /**
  * Protects routes that require authentication.
  * Redirects to /login with return URL if no user and session is loaded.
@@ -43,23 +87,23 @@ export const router = createBrowserRouter([
       },
       {
         path: "login",
-        element: <LoginPage />,
+        element: withSuspense(<LoginPage />),
       },
       {
         path: "client",
-        element: <ClientDeliveryPage />,
+        element: withSuspense(<ClientDeliveryPage />),
       },
       {
         path: "client/:token",
-        element: <ClientDeliveryPage />,
+        element: withSuspense(<ClientDeliveryPage />),
       },
       {
         path: "client/test",
-        element: <ClientTestPage />,
+        element: withSuspense(<ClientTestPage />),
       },
       {
         path: "client/test-consent",
-        element: <ClientTestConsentPage />,
+        element: withSuspense(<ClientTestConsentPage />),
       },
       {
         path: "delivery/:token",
@@ -67,11 +111,11 @@ export const router = createBrowserRouter([
       },
       {
         path: "forbidden",
-        element: <ForbiddenPage />,
+        element: withSuspense(<ForbiddenPage />),
       },
       {
         path: "dashboard",
-        element: (
+        element: withSuspense(
           <RequireAuth>
             <DashboardPage />
           </RequireAuth>
@@ -79,7 +123,7 @@ export const router = createBrowserRouter([
       },
       {
         path: "dashboard/group/:groupId",
-        element: (
+        element: withSuspense(
           <RequireAuth>
             <GroupDetailPage />
           </RequireAuth>
@@ -87,7 +131,7 @@ export const router = createBrowserRouter([
       },
       {
         path: "settings",
-        element: (
+        element: withSuspense(
           <RequireAuth>
             <SettingsPage />
           </RequireAuth>
@@ -95,7 +139,7 @@ export const router = createBrowserRouter([
       },
       {
         path: "*",
-        element: <NotFoundPage />,
+        element: withSuspense(<NotFoundPage />),
       },
     ],
   },