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 = () => ( +
+ Загрузка… +
+); + +const withSuspense = (node) => }>{node}; + /** * 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: , + element: withSuspense(), }, { path: "client", - element: , + element: withSuspense(), }, { path: "client/:token", - element: , + element: withSuspense(), }, { path: "client/test", - element: , + element: withSuspense(), }, { path: "client/test-consent", - element: , + element: withSuspense(), }, { path: "delivery/:token", @@ -67,11 +111,11 @@ export const router = createBrowserRouter([ }, { path: "forbidden", - element: , + element: withSuspense(), }, { path: "dashboard", - element: ( + element: withSuspense( @@ -79,7 +123,7 @@ export const router = createBrowserRouter([ }, { path: "dashboard/group/:groupId", - element: ( + element: withSuspense( @@ -87,7 +131,7 @@ export const router = createBrowserRouter([ }, { path: "settings", - element: ( + element: withSuspense( @@ -95,7 +139,7 @@ export const router = createBrowserRouter([ }, { path: "*", - element: , + element: withSuspense(), }, ], },