feat: enforce frontend quality guardrails

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>
 	);
 }