Add Suspense fallback for loading states in multiple pages and layouts

app/beta/magic/page.tsx

@@ -1,10 +1,10 @@
 "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";
 
-export default function BetaMagicPage() {
+function BetaMagicPageContent() {
   const params = useSearchParams();
   const token = params.get("token");
   const router = useRouter();
@@ -75,4 +75,19 @@ export default function BetaMagicPage() {
       </div>
     </main>
   );
+}
+
+export default function BetaMagicPage() {
+  return (
+    <Suspense fallback={
+      <main className="min-h-screen bg-black text-zinc-50 flex items-center justify-center px-4">
+        <div className="max-w-md w-full rounded-xl border border-white/10 bg-white/5 p-6">
+          <h1 className="text-lg font-semibold">Battl Builders</h1>
+          <p className="mt-2 text-sm text-zinc-300">Loading…</p>
+        </div>
+      </main>
+    }>
+      <BetaMagicPageContent />
+    </Suspense>
+  );
 }