Update page.tsx

app/auth/reset-password/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect } from "react";
+import { useState, useEffect, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { fetchClient } from "@/lib/api-client";
@@ -14,7 +14,7 @@ interface Vendor {
   username: string;
 }
 
-export default function ResetPasswordPage() {
+function ResetPasswordForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const token = searchParams.get('token');
@@ -170,3 +170,26 @@ export default function ResetPasswordPage() {
     </div>
   );
 }
+
+// Loading component for Suspense fallback
+function ResetPasswordLoading() {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
+      <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg text-center">
+        <div className="mt-6 flex flex-col items-center justify-center">
+          <div className="w-12 h-12 border-4 border-t-blue-500 border-b-transparent border-l-transparent border-r-transparent rounded-full animate-spin"></div>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading reset form...</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Main page component that uses Suspense
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<ResetPasswordLoading />}>
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}