Add field validation to resolve the Update Profile Issue

src/Components/Users/UserProfile.tsx

@@ -1,4 +1,4 @@
-import { useState, useReducer, FormEvent } from "react";
+import { useState, useReducer, FormEvent, useEffect } from "react";
 import { GENDER_TYPES } from "../../Common/constants";
 import { validateEmailAddress } from "../../Common/validation";
 import * as Notification from "../../Utils/Notifications.js";
@@ -117,6 +117,8 @@ export default function UserProfile() {
     isChecking: false,
     isUpdateAvailable: false,
   });
+  const [hasChanges, setHasChanges] = useState<boolean>(false);
+  const [isFieldLoaded, setIsFieldLoaded] = useState<boolean>(false);
 
   const authUser = useAuthUser();
 
@@ -172,6 +174,7 @@ export default function UserProfile() {
         type: "set_form",
         form: formData,
       });
+      setHasChanges(false);
     },
   });
 
@@ -324,8 +327,18 @@ export default function UserProfile() {
       type: "set_form",
       form: { ...states.form, [event.name]: event.value },
     });
+    setIsFieldLoaded(true);
   };
 
+  useEffect(() => {
+    if (showEdit && isFieldLoaded) {
+      setHasChanges(true);
+    } else {
+      setIsFieldLoaded(false);
+      setHasChanges(false);
+    }
+  }, [handleFieldChange]);
+
   const getDate = (value: any) =>
     value && dayjs(value).isValid() && dayjs(value).toDate();
 
@@ -788,7 +801,11 @@ export default function UserProfile() {
                       </div>
                     </div>
                     <div className="bg-secondary-50 px-4 py-3 text-right sm:px-6">
-                      <Submit onClick={handleSubmit} label={t("update")} />
+                      <Submit
+                        onClick={handleSubmit}
+                        label={t("update")}
+                        disabled={!hasChanges}
+                      />
                     </div>
                   </div>
                 </form>