Added loader while checking whether password was leaked previously.

Frontend/src/pages/Login/SignupPage.jsx

@@ -16,6 +16,7 @@ const SignupPage = (props) => {
 
   const [error, setError] = useState("");
   const [passwordStrength, setPasswordStrength] = useState("");
+  const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
 
   const evaluatePasswordStrength = (password) => {
@@ -33,7 +34,7 @@ const SignupPage = (props) => {
 
   const handlePasswordChange = (e) => {
     const pwd = e.target.value;
-    passwordElement.current.value = pwd; // keep the ref synced
+    passwordElement.current.value = pwd; // sync with ref
     setPasswordStrength(evaluatePasswordStrength(pwd));
   };
 
@@ -53,15 +54,18 @@ const SignupPage = (props) => {
       return;
     }
 
+    setLoading(true);
     try {
       const pwned = await isPasswordPwned(password);
       if (pwned) {
         setError("This password previously appeared in a data breach. Please use a new password.");
+        setLoading(false);
         return;
       }
     } catch (err) {
       console.error("Password breach check failed:", err);
       setError("Something went wrong while checking password security. Try again.");
+      setLoading(false);
       return;
     }
 
@@ -96,6 +100,7 @@ const SignupPage = (props) => {
     emailElement.current.value = "";
     passwordElement.current.value = "";
     setPasswordStrength("");
+    setLoading(false);
   };
 
   return (
@@ -107,6 +112,7 @@ const SignupPage = (props) => {
           </h1>
           <p className="text-gray-100">{t("signup_welcome", language)}</p>
           <p className="text-gray-100 mb-6">{t("signup_subtitle", language)}</p>
+
           <form className="space-y-6" onSubmit={handleRegisteration}>
             <div className="flex flex-col gap-5 sm:flex-row">
               <div className="w-full">
@@ -199,10 +205,20 @@ const SignupPage = (props) => {
 
             {error && <p className="text-red-500 text-sm font-medium">{error}</p>}
 
+            {loading && (
+              <div className="flex justify-center text-white font-medium">
+                Checking if password was leaked...
+                <div className="ml-2 animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-blue-500"></div>
+              </div>
+            )}
+
             <div className="flex justify-center">
               <button
                 type="submit"
-                className="text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
+                disabled={loading}
+                className={`text-white w-1/2 backdrop-blur-lg bg-gradient-to-tr from-slate-100/15 to-slate-200/15 shadow-lg hover:backdrop-blur-lg focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 ${
+                  loading ? "opacity-50 cursor-not-allowed" : ""
+                }`}
               >
                 {t("signup_register_button", language)}
               </button>