Add Suspense fallback for loading states in multiple pages and layouts

app/register/page.tsx

@@ -1,7 +1,7 @@
 // app/register/page.tsx
 "use client";
 
-import { FormEvent, useState } from "react";
+import { FormEvent, useState, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
@@ -9,7 +9,7 @@ import { Button, Field, Input } from "@/components/ui/form";
 
 const TOS_VERSION = "2025-12-27";
 
-export default function RegisterPage() {
+function RegisterPageContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { register, loading } = useAuth();
@@ -125,7 +125,7 @@ export default function RegisterPage() {
                 >
                   Privacy Policy
                 </Link>
-                . I understand Battl Builders is informational only and I’m
+                . I understand Battl Builders is informational only and I'm
                 solely responsible for legality, compatibility, and safe
                 assembly/use of any firearm or components.
               </span>
@@ -147,4 +147,18 @@ export default function RegisterPage() {
       </div>
     </main>
   );
+}
+
+export default function RegisterPage() {
+  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-64 animate-pulse bg-zinc-800 rounded" />
+        </div>
+      </main>
+    }>
+      <RegisterPageContent />
+    </Suspense>
+  );
 }