FORMS-9362: loading icon behind fields (#880)

* FORMS-9362: loading icon behind fields * FORMS-9362 : null check added as per comments * FORMS-9362 : changes due to review comments * FORMS-9362 : formatting the changes
adobe · Oct 3, 2023 · b810bda · b810bda
1 parent 54f671a
commit b810bda
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/.../content/jcr_root/apps/core/fd/components/form/container/v2/container/README.md b/.../content/jcr_root/apps/core/fd/components/form/container/v2/container/README.md
@@ -66,3 +66,5 @@ BLOCK cmp-adaptiveform-container
 ## JavaScript Data Attribute Bindings
 
 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.
diff --git a/...ps/core/fd/components/form/container/v2/container/clientlibs/site/js/formcontainerview.js b/...ps/core/fd/components/form/container/v2/container/clientlibs/site/js/formcontainerview.js
@@ -63,14 +63,20 @@
         const startTime = new Date().getTime();
         let elements = document.querySelectorAll(FormContainerV2.selectors.self);
         for (let i = 0; i < elements.length; i++) {
-            elements[i].classList.add(FormContainerV2.loadingClass);
+            let loaderToAdd = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ elements[i].id + "']");
+            if(loaderToAdd){
+                loaderToAdd.classList.add(FormContainerV2.loadingClass);
+            }
             console.debug("Form loading started", elements[i].id);
         }
         function onInit(e) {
             let formContainer =  e.detail;
             let formEl = formContainer.getFormElement();
             setTimeout(() => {
-                formEl.classList.remove(FormContainerV2.loadingClass);
+                let loaderToRemove = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ formEl.id + "']");
+                if(loaderToRemove){
+                    loaderToRemove.classList.remove(FormContainerV2.loadingClass);
+                }
                 const timeTaken = new Date().getTime() - startTime;
                 console.debug("Form loading complete", formEl.id, timeTaken);
                 }, 10);

diff --git a/.../main/content/jcr_root/apps/core/fd/components/form/container/v2/container/container.html b/.../main/content/jcr_root/apps/core/fd/components/form/container/v2/container/container.html
@@ -42,4 +42,4 @@
         <sly data-sly-use="${'removeattribute.js' @ referencedPage }"/>
     </div>
 </form>
-
+<div data-cmp-adaptiveform-container-loader="${container.id}"></div>
diff --git a/ui.tests/test-module/libs/support/commands.js b/ui.tests/test-module/libs/support/commands.js
@@ -338,14 +338,20 @@ const waitForFormInit = () => {
         cy.get('form').then(($form) => {
             const promise = new Cypress.Promise((resolve, reject) => {
                 const listener1 = e => {
+                    if(document.querySelector("[data-cmp-adaptiveform-container-loader='"+ $form[0].id + "']").classList.contains("cmp-adaptiveform-container--loading")){
                     const isReady = () => {
-                        if (!($form[0].classList.contains("cmp-adaptiveform-container--loading"))) {
+                        const container = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ $form[0].id + "']");
+                        if (container &&
+                            e.detail._path === $form.data("cmp-path") &&
+                            !container.classList.contains("cmp-adaptiveform-container--loading")) {
+
                             resolve(e.detail);
                         }
                         setTimeout(isReady, 0)
                     }
                     isReady();
                 }
+                }
                 document.addEventListener(INIT_EVENT, listener1);
             })
             return promise
@@ -360,15 +366,20 @@ const waitForFormInitMultipleContiners = () => {
         cy.get('form').each(($form) => {
             const promise = new Cypress.Promise((resolve, reject) => {
                 const listener1 = e => {
+                    if(document.querySelector("[data-cmp-adaptiveform-container-loader='"+ $form[0].id + "']").classList.contains("cmp-adaptiveform-container--loading")){
                     const isReady = () => {
-                        if (e.detail._path === $form.data("cmp-path") &&
-                            !($form[0].classList.contains("cmp-adaptiveform-container--loading"))) {
+                        const container = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ $form[0].id + "']");
+                        if (container &&
+                            e.detail._path === $form.data("cmp-path") &&
+                            !container.classList.contains("cmp-adaptiveform-container--loading")) {
+
                             resolve(e.detail);
                         }
                         setTimeout(isReady, 0)
                     }
                     isReady();
                 }
+                }
                 document.addEventListener(INIT_EVENT, listener1);
             })