Add Suspense fallback for loading states in multiple pages and layouts

app/(app)/(builder)/builder/page.tsx

@@ -1,6 +1,8 @@
 // app/(builder)/builder/page.tsx
 "use client";
 
+import { Suspense } from "react";
+
 /**
  * Battl Builder - Main builder page
  *
@@ -329,7 +331,7 @@ function buildAssemblyRows(params: {
   return rows;
 }
 
-export default function GunbuilderPage() {
+function GunbuilderPageContent() {
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -1704,3 +1706,19 @@ export default function GunbuilderPage() {
     </main>
   );
 }
+
+export default function GunbuilderPage() {
+  return (
+    <Suspense fallback={
+      <main className="min-h-screen bg-white text-zinc-900 dark:bg-black dark:text-zinc-50">
+        <div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-950/80 p-4">
+            <div className="text-sm text-zinc-400">Loading builder…</div>
+          </div>
+        </div>
+      </main>
+    }>
+      <GunbuilderPageContent />
+    </Suspense>
+  );
+}

app/(app)/layout.tsx

@@ -1,16 +1,18 @@
 // app/(builder)/layout.tsx
 import type { ReactNode } from "react";
+import { Suspense } from "react";
 
 import { BuilderNav } from "@/components/BuilderNav";
 import { TopNav } from "@/components/TopNav";
-import { Import } from "lucide-react";
 import { Footer } from "@/components/Footer";
 
 export default function BuilderLayout({ children }: { children: ReactNode }) {
   return (
     <div className="min-h-screen bg-white text-zinc-900 dark:bg-neutral-950 dark:text-zinc-50">
       <TopNav />
-      <BuilderNav />
+      <Suspense fallback={<div className="h-[52px]" />}>
+        <BuilderNav />
+      </Suspense>
       <main className="min-h-screen">{children}</main>
       <Footer />
     </div>