From 715c69d74441cf9fd32db61cd0a46405f522d774 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 16 Feb 2025 16:25:59 -0800
Subject: [PATCH] fix: verify page prerendering issue

---
 app/(auth)/verify/page.tsx | 63 ++++++++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/app/(auth)/verify/page.tsx b/app/(auth)/verify/page.tsx
index 006f4f6f7c..7e32b7bb6a 100644
--- a/app/(auth)/verify/page.tsx
+++ b/app/(auth)/verify/page.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { Suspense, useEffect, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { client } from '@/lib/auth-client'
 
-export default function VerifyPage() {
+function VerifyContent() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading')
@@ -28,31 +28,48 @@ export default function VerifyPage() {
       .catch(() => setStatus('error'))
   }, [searchParams, router])
 
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>
+          {status === 'loading' && 'Verifying your email...'}
+          {status === 'success' && 'Email verified!'}
+          {status === 'error' && 'Verification failed'}
+        </CardTitle>
+        <CardDescription>
+          {status === 'loading' && 'Please wait while we verify your email address.'}
+          {status === 'success' && 'You will be redirected to the dashboard shortly.'}
+          {status === 'error' && 'The verification link is invalid or has expired.'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {status === 'error' && (
+          <Button onClick={() => router.push('/login')} className="w-full">
+            Back to login
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function VerifyPage() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
         <h1 className="text-2xl font-bold text-center mb-8">Sim Studio</h1>
-        <Card className="w-full">
-          <CardHeader>
-            <CardTitle>
-              {status === 'loading' && 'Verifying your email...'}
-              {status === 'success' && 'Email verified!'}
-              {status === 'error' && 'Verification failed'}
-            </CardTitle>
-            <CardDescription>
-              {status === 'loading' && 'Please wait while we verify your email address.'}
-              {status === 'success' && 'You will be redirected to the dashboard shortly.'}
-              {status === 'error' && 'The verification link is invalid or has expired.'}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {status === 'error' && (
-              <Button onClick={() => router.push('/login')} className="w-full">
-                Back to login
-              </Button>
-            )}
-          </CardContent>
-        </Card>
+        <Suspense
+          fallback={
+            <Card className="w-full">
+              <CardHeader>
+                <CardTitle>Loading...</CardTitle>
+                <CardDescription>Please wait while we load the verification page.</CardDescription>
+              </CardHeader>
+            </Card>
+          }
+        >
+          <VerifyContent />
+        </Suspense>
       </div>
     </main>
   )