feat: enforce frontend quality guardrails

src/app/routes/AppRoutes.test.tsx

@@ -1,6 +1,7 @@
 import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { HttpResponse, http } from "msw";
 import { MemoryRouter } from "react-router";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
@@ -10,6 +11,7 @@ import {
 	AccountsPageError,
 	AccountsPageLoading,
 } from "@/pages/accounts";
+import { server } from "@/test/server";
 import { theme } from "../theme";
 import { AppRoutes } from "./AppRoutes";
 
@@ -89,6 +91,30 @@ describe("AppRoutes", () => {
 		);
 	});
 
+	it("lazy-loads the protected shell for an authenticated accounts route", async () => {
+		server.use(
+			http.post("*/api/v1/auth/refresh", () =>
+				HttpResponse.json({
+					accessToken: "test-token",
+					user: { id: "user-1", email: "user@example.com" },
+				}),
+			),
+		);
+		renderRoutes("/accounts");
+
+		await waitFor(() =>
+			expect(
+				screen.getByRole("heading", {
+					level: 2,
+					name: "Нет инвестиционных счетов",
+				}),
+			).toBeInTheDocument(),
+		);
+		expect(
+			screen.getByRole("navigation", { name: "WealthLedger" }),
+		).toBeInTheDocument();
+	});
+
 	it.each([
 		["loading", AccountsPageLoading, "status"],
 		["error", AccountsPageError, "alert"],

src/app/routes/AppRoutes.tsx

@@ -1,15 +1,48 @@
+import { Loader } from "@mantine/core";
+import { lazy, Suspense } from "react";
 import { Navigate, Route, Routes, useLocation } from "react-router";
 import { useAuth } from "@/features/auth";
-import { AccountPage } from "@/pages/account";
-import { AccountEventsPage } from "@/pages/account-events";
-import { AccountOperationsPage } from "@/pages/account-operations";
-import { AccountsPage } from "@/pages/accounts";
-import { LoginPage } from "@/pages/login";
-import { NotFoundPage } from "@/pages/not-found";
-import { RegisterPage } from "@/pages/register";
-import { SettingsPage } from "@/pages/settings";
-import { AppShell } from "@/shared/ui";
-import { AppBreadcrumbs } from "../ui/AppBreadcrumbs";
+
+const AccountPage = lazy(async () => {
+	const { AccountPage } = await import("@/pages/account");
+	return { default: AccountPage };
+});
+const AccountEventsPage = lazy(async () => {
+	const { AccountEventsPage } = await import("@/pages/account-events");
+	return { default: AccountEventsPage };
+});
+const AccountOperationsPage = lazy(async () => {
+	const { AccountOperationsPage } = await import("@/pages/account-operations");
+	return { default: AccountOperationsPage };
+});
+const AccountsPage = lazy(async () => {
+	const { AccountsPage } = await import("@/pages/accounts");
+	return { default: AccountsPage };
+});
+const LoginPage = lazy(async () => {
+	const { LoginPage } = await import("@/pages/login");
+	return { default: LoginPage };
+});
+const NotFoundPage = lazy(async () => {
+	const { NotFoundPage } = await import("@/pages/not-found");
+	return { default: NotFoundPage };
+});
+const RegisterPage = lazy(async () => {
+	const { RegisterPage } = await import("@/pages/register");
+	return { default: RegisterPage };
+});
+const SettingsPage = lazy(async () => {
+	const { SettingsPage } = await import("@/pages/settings");
+	return { default: SettingsPage };
+});
+const ProtectedLayout = lazy(async () => {
+	const { ProtectedLayout } = await import("./ProtectedLayout");
+	return { default: ProtectedLayout };
+});
+
+function LazyPage({ children }: { children: React.ReactNode }) {
+	return <Suspense fallback={<Loader />}>{children}</Suspense>;
+}
 
 function Protected({ children }: { children: React.ReactNode }) {
 	const { user, ready } = useAuth();
@@ -40,7 +73,9 @@ export function AppRoutes() {
 				path="/login"
 				element={
 					<Public>
-						<LoginPage />
+						<LazyPage>
+							<LoginPage />
+						</LazyPage>
 					</Public>
 				}
 			/>
@@ -48,30 +83,70 @@ export function AppRoutes() {
 				path="/register"
 				element={
 					<Public>
-						<RegisterPage />
+						<LazyPage>
+							<RegisterPage />
+						</LazyPage>
 					</Public>
 				}
 			/>
 			<Route
 				element={
 					<Protected>
-						<AppShell contentAboveOutlet={<AppBreadcrumbs />} />
+						<LazyPage>
+							<ProtectedLayout />
+						</LazyPage>
 					</Protected>
 				}
 			>
-				<Route path="/accounts" element={<AccountsPage />} />
-				<Route path="/accounts/:accountId" element={<AccountPage />} />
+				<Route
+					path="/accounts"
+					element={
+						<LazyPage>
+							<AccountsPage />
+						</LazyPage>
+					}
+				/>
+				<Route
+					path="/accounts/:accountId"
+					element={
+						<LazyPage>
+							<AccountPage />
+						</LazyPage>
+					}
+				/>
 				<Route
 					path="/accounts/:accountId/events"
-					element={<AccountEventsPage />}
+					element={
+						<LazyPage>
+							<AccountEventsPage />
+						</LazyPage>
+					}
 				/>
 				<Route
 					path="/accounts/:accountId/operations"
-					element={<AccountOperationsPage />}
+					element={
+						<LazyPage>
+							<AccountOperationsPage />
+						</LazyPage>
+					}
+				/>
+				<Route
+					path="/settings"
+					element={
+						<LazyPage>
+							<SettingsPage />
+						</LazyPage>
+					}
 				/>
-				<Route path="/settings" element={<SettingsPage />} />
 			</Route>
-			<Route path="*" element={<NotFoundPage />} />
+			<Route
+				path="*"
+				element={
+					<LazyPage>
+						<NotFoundPage />
+					</LazyPage>
+				}
+			/>
 		</Routes>
 	);
 }

src/app/routes/ProtectedLayout.tsx

@@ -0,0 +1,6 @@
+import { AppBreadcrumbs } from "@/app/ui";
+import { AppShell } from "@/shared/ui";
+
+export function ProtectedLayout() {
+	return <AppShell contentAboveOutlet={<AppBreadcrumbs />} />;
+}

src/app/routes/index.ts

@@ -1 +1,2 @@
 export { AppRoutes } from "./AppRoutes";
+export { RouteErrorBoundary } from "./RouteErrorBoundary";

src/app/ui/App.tsx

@@ -1,8 +1,7 @@
 import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter } from "react-router";
-import { AppRoutes } from "@/app/routes";
-import { RouteErrorBoundary } from "@/app/routes/RouteErrorBoundary";
+import { AppRoutes, RouteErrorBoundary } from "@/app/routes";
 import { theme } from "@/app/theme";
 import { AuthProvider } from "@/features/auth";
 

src/app/ui/index.ts

@@ -0,0 +1 @@
+export { AppBreadcrumbs } from "./AppBreadcrumbs";

src/features/auth/ui/AuthForm.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { z } from "zod";
 
-import { validationMessage } from "../../../shared/i18n";
+import { validationMessage } from "@/shared/i18n";
 
 function isEmailCharacterInvalid(character: string): boolean {
 	return (

src/shared/i18n/i18n.ts

@@ -0,0 +1,13 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import { ru } from "./locales/ru";
+
+void i18n.use(initReactI18next).init({
+	resources: { ru },
+	lng: "ru",
+	fallbackLng: "ru",
+	interpolation: { escapeValue: false },
+});
+
+export { i18n };

src/shared/i18n/index.ts

@@ -1,14 +1 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-
-import { ru } from "./locales/ru";
-
-void i18n.use(initReactI18next).init({
-	resources: { ru },
-	lng: "ru",
-	fallbackLng: "ru",
-	interpolation: { escapeValue: false },
-});
-
 export { validationMessage } from "./zod";
-export { i18n };

src/shared/i18n/zod.ts

@@ -1,6 +1,6 @@
 import type { ParseKeys } from "i18next";
 
-import { i18n } from ".";
+import { i18n } from "./i18n";
 
 export function validationMessage(
 	key: ParseKeys,