fix: wrap useSearchParams in Suspense to fix build error

- Add Suspense boundaries around components using useSearchParams()
- Create wrapper components for sign-in and sign-up forms
- Fix widget preview page to use Suspense
- Prevents prerendering errors during static generation

Author: StephaneWamba

frontend/app/login/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { SignInForm } from '@/components/auth/sign-in-form'
+import { SignInFormWrapper } from '@/components/auth/sign-in-form-wrapper'
 import { ThemeToggle } from '@/components/shared/theme-toggle'
 import Link from 'next/link'
 import Image from 'next/image'
@@ -81,7 +81,7 @@ export default function LoginPage() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.5 }}
           >
-            <SignInForm />
+            <SignInFormWrapper />
           </motion.div>
 
           <motion.div

frontend/app/signup/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { SignUpForm } from '@/components/auth/sign-up-form'
+import { SignUpFormWrapper } from '@/components/auth/sign-up-form-wrapper'
 import { ThemeToggle } from '@/components/shared/theme-toggle'
 import Link from 'next/link'
 import Image from 'next/image'
@@ -81,7 +81,7 @@ export default function SignupPage() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.5 }}
           >
-            <SignUpForm />
+            <SignUpFormWrapper />
           </motion.div>
 
           <motion.div

frontend/app/widget-preview/page.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, Suspense } from 'react'
 import { useSearchParams } from 'next/navigation'
 
-export default function WidgetPreviewPage() {
+function WidgetPreviewContent() {
   const searchParams = useSearchParams()
   const containerRef = useRef<HTMLDivElement>(null)
 
@@ -81,3 +81,18 @@ export default function WidgetPreviewPage() {
   )
 }
 
+export default function WidgetPreviewPage() {
+  return (
+    <Suspense fallback={
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold mb-2">Widget Preview</h1>
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    }>
+      <WidgetPreviewContent />
+    </Suspense>
+  )
+}
+

frontend/components/auth/sign-in-form-wrapper.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { Suspense } from 'react'
+import { SignInForm } from './sign-in-form'
+
+export function SignInFormWrapper() {
+  return (
+    <Suspense fallback={
+      <div className="space-y-4">
+        <div className="h-10 bg-muted animate-pulse rounded" />
+        <div className="h-10 bg-muted animate-pulse rounded" />
+        <div className="h-10 bg-muted animate-pulse rounded" />
+      </div>
+    }>
+      <SignInForm />
+    </Suspense>
+  )
+}
+

frontend/components/auth/sign-up-form-wrapper.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { Suspense } from 'react'
+import { SignUpForm } from './sign-up-form'
+
+export function SignUpFormWrapper() {
+  return (
+    <Suspense fallback={
+      <div className="space-y-4">
+        <div className="h-10 bg-muted animate-pulse rounded" />
+        <div className="h-10 bg-muted animate-pulse rounded" />
+        <div className="h-10 bg-muted animate-pulse rounded" />
+        <div className="h-10 bg-muted animate-pulse rounded" />
+      </div>
+    }>
+      <SignUpForm />
+    </Suspense>
+  )
+}
+