Merge pull request #1713 from adobe/FORMS-21742

Feat: added the loader to avoid multiple submits and tests

Author: armaang1729

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/actions/submit/v1/submit/README.md

@@ -23,6 +23,7 @@ Adaptive Form Submit Button component written in HTL.
 * Custom description/tooltip for help
 * Out of the box Submit rule in the button to submit the form
 * Allows replacing this component with other component (as mentioned below).
+* Shows a loader on the form container during submission
 
 ### Use Object
 The submit button component uses the `com.adobe.cq.forms.core.components.models.form.Button` Sling Model for its Use-object.
@@ -41,6 +42,14 @@ The button has a default property of `buttonType` set to `submit` which is used
 The component provides a `core.forms.components.button.v1.runtime` client library category that contains the Javascript runtime for the component. 
 It should be added to a relevant site client library using the `embed` property.
 
+### Loader behavior on submit
+
+When the Submit button is activated and the form begins submission, the form container gets a loading state so users receive visual feedback:
+
+- The form element `form.cmp-adaptiveform-container` toggles the CSS class `cmp-adaptiveform-container--submitting` for the duration of the network request.
+- The loading class is removed and the loader hides when validation fails, the submission succeeds, or an error occurs.
+
+
 ## BEM Description
 ```
 BLOCK cmp-adaptiveform-button
@@ -83,7 +92,4 @@ We support replace feature that allows replacing Reset Button component to any o
 * **Vendor**: Adobe
 * **Version**: v1
 * **Compatibility**: Cloud
-* **Status**: production-ready
-
-
-
+* **Status**: production-ready

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/clientlibs/site/js/buttonview.js

@@ -36,6 +36,50 @@
             tooltipDiv: `.${Button.bemBlock}__shortdescription`
         };
 
+        constructor(params) {
+            super(params);
+            const formModel = this.formContainer?.getModel?.();
+            if (!formModel) { return; }
+            
+            formModel.subscribe((action) => { // hide loader if validation fails (no submit performed)
+                const errors = action?.payload;
+                if (Array.isArray(errors) && errors.length > 0) {
+                    this._hideLoader();
+                }
+            }, 'validationComplete');
+
+            formModel.subscribe(() => { // hide loader on submit success
+                this._hideLoader();
+            }, 'submitSuccess');
+            
+            formModel.subscribe(() => { // hide loader on submit error
+                this._hideLoader();
+            }, 'submitError');
+        }
+
+        _container = null;
+
+        _getContainer() {
+            if (this._container) return this._container;
+            const container = this.formContainer?.getFormElement?.();
+            if (container) this._container = container;
+            return this._container;
+        }
+
+        _showLoader() {
+            const container = this._getContainer();
+            if (container) {
+                container.classList.add('cmp-adaptiveform-container--submitting');
+            }
+        }
+
+        _hideLoader() {
+            const container = this._getContainer();
+            if (container) {
+                container.classList.remove('cmp-adaptiveform-container--submitting');
+            }
+        }
+
         getQuestionMarkDiv() {
             return this.element.querySelector(Button.selectors.qm);
         }
@@ -70,6 +114,9 @@
                 if (this.widget.type === 'submit' || this.widget.type === 'reset') {
                     event.preventDefault();
                 }
+                if (this.widget.type === 'submit') {
+                    this._showLoader();
+                }
                 this._model.dispatch(new FormView.Actions.Click());
             });
         }
@@ -79,4 +126,4 @@
         return new Button({element, formContainer})
     }, Button.selectors.self);
 
-})();
+})();

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/README.md

@@ -25,6 +25,7 @@ Adaptive Form container written in HTL.
 * Thank you message
 * Ability to drop other adaptive form components
 * Auto save feature for Drafts
+* Loader overlay during form submission to prevent multiple submits
 
 ### Use Object
 The Adaptive Form Container component uses the `com.adobe.cq.forms.core.components.models.form.FormContainer` Sling Model for its Use-object.
@@ -86,7 +87,9 @@ BLOCK cmp-adaptiveform-container
 
 Apply a `data-cmp-is="adaptiveFormContainer"` attribute to the `cmp-adaptiveform-container` block to enable initialization of the JavaScript component.
 
-Applying `data-cmp-adaptiveform-container-loader` attribute to the div specifically for applying the loader class on it, it is to ensure that the loading icon should not appear over components.
+Applying `data-cmp-adaptiveform-container-loader` attribute to the div specifically for applying the loader class on it, it is to ensure that the loading icon should not appear over components. 
+
+During the form submission, the form element `form.cmp-adaptiveform-container` toggles the class `cmp-adaptiveform-container--submitting` and the loader inside becomes visible. The class is removed once validation fails, submission succeeds or errors out, or the thank you page/message is shown.
 
 Applying `data-cmp-custom-functions-module-url` attribute to the div to point to the edge delivery URL of the custom functions file. Custom Functions exported from this file will be registered in Function Runtime. 
 This Url should whitelist the AEM author/publish domain in the Cross Origin Resource Sharing (CORS) configuration.

ui.tests/test-module/specs/actions/submit/submit.runtime.cy.js

@@ -197,4 +197,22 @@ describe("Form with Submit Button", () => {
             cy.get(`.cmp-adaptiveform-button__widget`).should('have.attr', 'type', 'submit');
         });
     }
+
+    it("Loader shows on submit and hides on success with thank you", () => {
+        cy.previewForm(customSubmitPagePath);
+
+        let requestStarted = false;
+        cy.intercept('POST', '**/adobe/forms/af/submit/*', (req) => {
+            requestStarted = true;
+            return Cypress.Promise.delay(3000).then(() =>  req.continue())
+        }).as('afSubmission');
+
+        cy.get(`.cmp-adaptiveform-button__widget`).click();
+
+        cy.get('form.cmp-adaptiveform-container').should('have.class', 'cmp-adaptiveform-container--submitting')
+
+        cy.wait('@afSubmission').then(() => {
+            cy.contains("Thank you for submitting the form.");
+        });
+    });
 })