From 8d3fd0b0d2b574e83b1e1218d8876f8b21bfdd8d Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 6 Feb 2026 09:46:10 +0530
Subject: [PATCH] feat: Implement Suspense with a loading fallback for the 2FA
 verification page.

---
 src/app/(auth)/login/verify-2fa/page.tsx | 37 ++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/app/(auth)/login/verify-2fa/page.tsx b/src/app/(auth)/login/verify-2fa/page.tsx
index 60dcf5b..1f4db39 100644
--- a/src/app/(auth)/login/verify-2fa/page.tsx
+++ b/src/app/(auth)/login/verify-2fa/page.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { signIn } from 'next-auth/react';
 import Link from 'next/link';
 import { twoFactorService } from '@/services';
 
-export default function VerifyTwoFactorPage() {
+function VerifyTwoFactorContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [code, setCode] = useState(['', '', '', '', '', '']);
@@ -264,3 +264,36 @@ export default function VerifyTwoFactorPage() {
     </>
   );
 }
+
+// Loading component for Suspense fallback
+function VerifyTwoFactorLoading() {
+  return (
+    <div className="text-center">
+      <div className="w-16 h-16 mx-auto mb-4 bg-[#f0f5fc] rounded-full flex items-center justify-center animate-pulse">
+        <svg
+          className="w-8 h-8 text-[#e58625]"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+          />
+        </svg>
+      </div>
+      <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Loading...</h2>
+    </div>
+  );
+}
+
+// Page component wrapped in Suspense for useSearchParams
+export default function VerifyTwoFactorPage() {
+  return (
+    <Suspense fallback={<VerifyTwoFactorLoading />}>
+      <VerifyTwoFactorContent />
+    </Suspense>
+  );
+}