FIX #6324 : reset recaptcha token on click and handled button loading explicitly (#6337)

 reset re-captcha token on click and handled button loading explicitly such that the user know that the api call has not finished

(cherry picked from commit 31f8a70)
(cherry picked from commit 35ee2a9)

Author: vibhandikyash

app/client/src/components/designSystems/blueprint/ButtonComponent.tsx

@@ -153,6 +153,7 @@ export enum ButtonType {
 interface RecaptchaProps {
   googleRecaptchaKey?: string;
   clickWithRecaptcha: (token: string) => void;
+  handleRecaptchaV2Loading?: (isLoading: boolean) => void;
   recaptchaV2?: boolean;
 }
 
@@ -190,20 +191,27 @@ function RecaptchaV2Component(
 ) {
   const recaptchaRef = useRef<ReCAPTCHA>(null);
   const [isInvalidKey, setInvalidKey] = useState(false);
+  const handleRecaptchaLoading = (isloading: boolean) => {
+    props.handleRecaptchaV2Loading && props.handleRecaptchaV2Loading(isloading);
+  };
   const handleBtnClick = async (event: React.MouseEvent<HTMLElement>) => {
     if (isInvalidKey) {
       // Handle incorrent google recaptcha site key
       props.handleError(event, createMessage(GOOGLE_RECAPTCHA_KEY_ERROR));
     } else {
+      handleRecaptchaLoading(true);
       try {
+        await recaptchaRef?.current?.reset();
         const token = await recaptchaRef?.current?.executeAsync();
         if (token) {
           props.clickWithRecaptcha(token);
         } else {
           // Handle incorrent google recaptcha site key
           props.handleError(event, createMessage(GOOGLE_RECAPTCHA_KEY_ERROR));
         }
+        handleRecaptchaLoading(false);
       } catch (err) {
+        handleRecaptchaLoading(false);
         // Handle error due to google recaptcha key of different domain
         props.handleError(event, createMessage(GOOGLE_RECAPTCHA_DOMAIN_ERROR));
       }
@@ -316,6 +324,7 @@ function ButtonContainer(
     <BtnWrapper
       clickWithRecaptcha={props.clickWithRecaptcha}
       googleRecaptchaKey={props.googleRecaptchaKey}
+      handleRecaptchaV2Loading={props.handleRecaptchaV2Loading}
       onClick={props.onClick}
       recaptchaV2={props.recaptchaV2}
     >

app/client/src/widgets/ButtonWidget.tsx

@@ -144,11 +144,6 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
   }
 
   clickWithRecaptcha(token: string) {
-    if (this.props.onClick) {
-      this.setState({
-        isLoading: true,
-      });
-    }
     this.props.updateWidgetMetaProperty("recaptchaToken", token, {
       triggerPropertyName: "onClick",
       dynamicString: this.props.onClick,
@@ -159,6 +154,12 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
     });
   }
 
+  handleRecaptchaV2Loading = (isLoading: boolean) => {
+    if (this.props.onClick) {
+      this.setState({ isLoading });
+    }
+  };
+
   handleActionComplete = () => {
     this.setState({
       isLoading: false,
@@ -172,6 +173,7 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, ButtonWidgetState> {
         clickWithRecaptcha={this.clickWithRecaptchaBound}
         disabled={this.props.isDisabled}
         googleRecaptchaKey={this.props.googleRecaptchaKey}
+        handleRecaptchaV2Loading={this.handleRecaptchaV2Loading}
         isLoading={this.props.isLoading || this.state.isLoading}
         key={this.props.widgetId}
         onClick={!this.props.isDisabled ? this.onButtonClickBound : undefined}