Merge pull request #33401 from sourcecodedeveloper/magicCodeSentTwice

resolve magic code sent twice

src/pages/signin/LoginForm/BaseLoginForm.js

@@ -99,6 +99,7 @@ function LoginForm(props) {
     const prevIsVisible = usePrevious(props.isVisible);
     const firstBlurred = useRef(false);
     const isFocused = useIsFocused();
+    const isLoading = useRef(false);
 
     const {translate} = props;
 
@@ -165,9 +166,10 @@ function LoginForm(props) {
      * Check that all the form fields are valid, then trigger the submit callback
      */
     const validateAndSubmitForm = useCallback(() => {
-        if (props.network.isOffline || props.account.isLoading) {
+        if (props.network.isOffline || props.account.isLoading || isLoading.current) {
             return;
         }
+        isLoading.current = true;
 
         // If account was closed and have success message in Onyx, we clear it here
         if (!_.isEmpty(props.closeAccount.success)) {
@@ -181,6 +183,7 @@ function LoginForm(props) {
         }
 
         if (!validate(login)) {
+            isLoading.current = false;
             return;
         }
 
@@ -219,6 +222,13 @@ function LoginForm(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want to call this function when component is mounted
     }, []);
 
+    useEffect(() => {
+        if (props.account.isLoading !== false) {
+            return;
+        }
+        isLoading.current = false;
+    }, [props.account.isLoading]);
+
     useEffect(() => {
         if (props.blurOnSubmit) {
             input.current.blur();