perf: lazy-load About modal to reduce initial bundle size

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: moreal

packages/frontend/src/components/AboutModal.tsx

@@ -0,0 +1,99 @@
+import { Dialog } from "@base-ui/react/dialog";
+import { useLanguage } from "../hooks/useLanguage";
+
+interface AboutModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+function AboutModal({ isOpen, onClose }: AboutModalProps) {
+	const { t } = useLanguage();
+	const aboutContent = t("footer.aboutContent") as unknown as string[];
+
+	return (
+		<Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
+			<Dialog.Portal keepMounted>
+				<Dialog.Backdrop
+					className="modal-backdrop"
+					style={{
+						position: "fixed",
+						top: 0,
+						left: 0,
+						right: 0,
+						bottom: 0,
+						backgroundColor: "rgba(0, 0, 0, 0.7)",
+						zIndex: "var(--z-index-backdrop)",
+					}}
+				/>
+				<Dialog.Popup
+					className="modal-popup"
+					style={{
+						position: "fixed",
+						top: "50%",
+						left: "50%",
+						transform: "translate(-50%, -50%)",
+						backgroundColor: "var(--bg-primary)",
+						color: "var(--text-primary)",
+						padding: "1.5rem",
+						borderRadius: "8px",
+						maxWidth: "90vw",
+						width: "600px",
+						maxHeight: "90vh",
+						overflow: "auto",
+						zIndex: "var(--z-index-modal)",
+						margin: "10px",
+					}}
+				>
+					<Dialog.Close
+						aria-label={t("common.close")}
+						className="modal-close-button"
+						style={{
+							position: "absolute",
+							top: "14px",
+							right: "14px",
+							background: "none",
+							border: "none",
+							color: "var(--text-primary)",
+							fontSize: "24px",
+							cursor: "pointer",
+							width: "36px",
+							height: "36px",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							touchAction: "manipulation",
+						}}
+					>
+						×
+					</Dialog.Close>
+					<Dialog.Title
+						style={{
+							marginTop: 0,
+							color: "var(--text-primary)",
+							fontSize: "clamp(20px, 5vw, 24px)",
+						}}
+					>
+						{t("footer.aboutTitle")}
+					</Dialog.Title>
+					<Dialog.Description>
+						{aboutContent.map((paragraph, index) => (
+							<p
+								key={index}
+								style={{
+									lineHeight: 1.6,
+									color: "var(--text-primary)",
+									wordBreak: "keep-all",
+									fontSize: "clamp(14px, 4vw, 16px)",
+								}}
+							>
+								{paragraph}
+							</p>
+						))}
+					</Dialog.Description>
+				</Dialog.Popup>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+}
+
+export default AboutModal;

packages/frontend/src/components/Footer.tsx

@@ -1,103 +1,9 @@
-import { useState } from "react";
-import { Dialog } from "@base-ui/react/dialog";
+import { useState, lazy, Suspense } from "react";
 import { ThemeToggle } from "./ThemeToggle";
 import { LanguageSelect } from "./LanguageSelect";
 import { useLanguage } from "../hooks/useLanguage";
 
-interface AboutModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-}
-
-function AboutModal({ isOpen, onClose }: AboutModalProps) {
-	const { t } = useLanguage();
-	const aboutContent = t("footer.aboutContent") as unknown as string[];
-
-	return (
-		<Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
-			<Dialog.Portal keepMounted>
-				<Dialog.Backdrop
-					className="modal-backdrop"
-					style={{
-						position: "fixed",
-						top: 0,
-						left: 0,
-						right: 0,
-						bottom: 0,
-						backgroundColor: "rgba(0, 0, 0, 0.7)",
-						zIndex: "var(--z-index-backdrop)",
-					}}
-				/>
-				<Dialog.Popup
-					className="modal-popup"
-					style={{
-						position: "fixed",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						backgroundColor: "var(--bg-primary)",
-						color: "var(--text-primary)",
-						padding: "1.5rem",
-						borderRadius: "8px",
-						maxWidth: "90vw",
-						width: "600px",
-						maxHeight: "90vh",
-						overflow: "auto",
-						zIndex: "var(--z-index-modal)",
-						margin: "10px",
-					}}
-				>
-					<Dialog.Close
-						aria-label={t("common.close")}
-						className="modal-close-button"
-						style={{
-							position: "absolute",
-							top: "14px",
-							right: "14px",
-							background: "none",
-							border: "none",
-							color: "var(--text-primary)",
-							fontSize: "24px",
-							cursor: "pointer",
-							width: "36px",
-							height: "36px",
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							touchAction: "manipulation",
-						}}
-					>
-						×
-					</Dialog.Close>
-					<Dialog.Title
-						style={{
-							marginTop: 0,
-							color: "var(--text-primary)",
-							fontSize: "clamp(20px, 5vw, 24px)",
-						}}
-					>
-						{t("footer.aboutTitle")}
-					</Dialog.Title>
-					<Dialog.Description>
-						{aboutContent.map((paragraph, index) => (
-							<p
-								key={index}
-								style={{
-									lineHeight: 1.6,
-									color: "var(--text-primary)",
-									wordBreak: "keep-all",
-									fontSize: "clamp(14px, 4vw, 16px)",
-								}}
-							>
-								{paragraph}
-							</p>
-						))}
-					</Dialog.Description>
-				</Dialog.Popup>
-			</Dialog.Portal>
-		</Dialog.Root>
-	);
-}
+const AboutModal = lazy(() => import("./AboutModal"));
 
 export function Footer() {
 	const [isAboutOpen, setIsAboutOpen] = useState(false);
@@ -157,7 +63,12 @@ export function Footer() {
 			</a>
 			<ThemeToggle />
 			<LanguageSelect />
-			<AboutModal isOpen={isAboutOpen} onClose={() => setIsAboutOpen(false)} />
+			<Suspense fallback={null}>
+				<AboutModal
+					isOpen={isAboutOpen}
+					onClose={() => setIsAboutOpen(false)}
+				/>
+			</Suspense>
 		</footer>
 	);
 }