Lazy-load app routes for code splitting

src/components/layout/AppRoutes.tsx

-import { Suspense } from "react";
+import { Suspense, lazy } from "react";
 import { Route, Routes } from "react-router-dom";
 import LoadingPage from "../pages/LoadingPage";
-import IndexPage from "../pages/IndexPage";
-import AccountPage from "../pages/AccountPage";
-import DiscordLinkPage from "../pages/DiscordLinkPage";
 import NotFoundPage from "../pages/NotFoundPage";
-import WidgetsPage from "../pages/WidgetsPage";
-import OAuthCallbackPage from "../pages/OAuthCallbackPage";
-import ContactPage from "../pages/ContactPage";
+
+const LazyIndexPage = lazy(() => import("../pages/IndexPage"));
+const LazyAccountPage = lazy(() => import("../pages/AccountPage"));
+const LazyDiscordLinkPage = lazy(() => import("../pages/DiscordLinkPage"));
+const LazyContactPage = lazy(() => import("../pages/ContactPage"));
+const LazyOAuthCallbackPage = lazy(() => import("../pages/OAuthCallbackPage"));
+const LazyWidgetsPage = lazy(() => import("../pages/WidgetsPage"));
 
 export default function AppRoutes() {
 	return (
 		<Suspense fallback={<LoadingPage />}>
 			<Routes>
-				<Route path="/" element={<IndexPage />} />
-				<Route path="/account" element={<AccountPage />} />
-				<Route path="/discord" element={<DiscordLinkPage />} />
-				<Route path="/contact" element={<ContactPage />} />
-				<Route path="/auth/:type/callback" element={<OAuthCallbackPage />} />
+				<Route path="/" element={<LazyIndexPage />} />
+				<Route path="/account" element={<LazyAccountPage />} />
+				<Route path="/discord" element={<LazyDiscordLinkPage />} />
+				<Route path="/contact" element={<LazyContactPage />} />
+				<Route path="/auth/:type/callback" element={<LazyOAuthCallbackPage />} />
 				<Route path="/debug-loading" element={<LoadingPage />} />
-				<Route path="/debug-widgets" element={<WidgetsPage />} />
+				<Route path="/debug-widgets" element={<LazyWidgetsPage />} />
 				<Route path="/*" element={<NotFoundPage />} />
 			</Routes>
 		</Suspense>