Add Suspense fallback for loading states in multiple pages and layouts

app/login/page.tsx

@@ -1,7 +1,7 @@
 // app/login/page.tsx
 "use client";
 
-import { FormEvent, useMemo, useState } from "react";
+import { FormEvent, useMemo, useState, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
@@ -10,7 +10,7 @@ import { Button, Field, Input } from "@/components/ui/form";
 const API_BASE_URL =
   process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
 
-export default function LoginPage() {
+function LoginPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { login, loading } = useAuth();
@@ -186,3 +186,17 @@ export default function LoginPage() {
     </main>
   );
 }
+
+export default function LoginPage() {
+  return (
+    <Suspense fallback={
+      <main className="min-h-screen bg-black text-zinc-50">
+        <div className="mx-auto flex max-w-md flex-col px-4 py-10">
+          <div className="h-8 w-48 animate-pulse bg-zinc-800 rounded" />
+        </div>
+      </main>
+    }>
+      <LoginPageContent />
+    </Suspense>
+  );
+}