feat: enable React Compiler, optimizePackageImports for lucide-react, add loading states for (site) and client routes

next.config.ts

@@ -57,6 +57,7 @@ const nextConfig: NextConfig = {
 			dynamic: 30,
 			static: 180,
 		},
+		optimizePackageImports: ["lucide-react"],
 	},
 
 	// Add caching headers for static assets

package.json

@@ -77,6 +77,7 @@
 		"@types/react": "^19.2.0",
 		"@types/react-dom": "^19.2.0",
 		"@types/sanitize-html": "^2.16.1",
+		"babel-plugin-react-compiler": "^1.0.0",
 		"dotenv": "^16.4.0",
 		"knip": "^6.27.0",
 		"pino-pretty": "^13.1.3",

src/app/(site)/loading.tsx

@@ -0,0 +1,15 @@
+export default function SiteLoading() {
+	return (
+		<div
+			style={{ display: "flex", justifyContent: "center", padding: "4rem 0" }}
+		>
+			<div
+				className="animate-spin w-8 h-8 border-4 rounded-full"
+				style={{
+					borderColor: "var(--color-primary)",
+					borderTopColor: "transparent",
+				}}
+			/>
+		</div>
+	);
+}

src/app/client/loading.tsx

@@ -0,0 +1,16 @@
+export default function ClientLoading() {
+	return (
+		<div
+			className="flex items-center justify-center min-h-screen"
+			style={{ background: "var(--color-background)" }}
+		>
+			<div
+				className="animate-spin w-10 h-10 border-4 rounded-full"
+				style={{
+					borderColor: "var(--color-primary)",
+					borderTopColor: "transparent",
+				}}
+			/>
+		</div>
+	);
+}