Add Suspense fallback for loading states in multiple pages and layouts

app/beta/confirm/page.tsx

@@ -1,14 +1,14 @@
 // app/beta/confirm/page.tsx
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useAuth } from "@/context/AuthContext";
 
 const API_BASE_URL =
   process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
 
-export default function BetaConfirmPage() {
+function BetaConfirmPageContent() {
   const params = useSearchParams();
   const token = params.get("token");
   const router = useRouter();
@@ -88,4 +88,19 @@ export default function BetaConfirmPage() {
       </div>
     </main>
   );
+}
+
+export default function BetaConfirmPage() {
+  return (
+    <Suspense fallback={
+      <main className="min-h-screen flex items-center justify-center bg-black text-white px-6">
+        <div className="max-w-md w-full rounded-xl border border-white/10 bg-white/5 p-6 text-center">
+          <h1 className="text-lg font-semibold">Battl Builders</h1>
+          <p className="mt-2 text-sm text-zinc-300">Loading…</p>
+        </div>
+      </main>
+    }>
+      <BetaConfirmPageContent />
+    </Suspense>
+  );
 }