Merge pull request #833 from Safelite/feature/richardson/SSR-325.4

Add a loader to the finish claim button

src/iss-components/continue-modal/continue-modal.vue

@@ -15,9 +15,13 @@
                 <button
                     id="btnContinueReferral"
                     type="button"
-                    class="btn btn-white-blue continue-referral align-items-center justify-content-center mt-2 py-3 px-4 delay w-100"
+                    class="btn btn-white-blue continue-referral
+                    align-items-center justify-content-center d-inline-flex mt-2 py-3 px-4 delay w-100"
                     @click="continueReferral">
                     {{ modalBodyText }}
+                    <loader
+                        v-if="isLoaderDisplayed"
+                        class="ms-2 button-loader" />
                 </button>
             </modal>
         </div>
@@ -25,17 +29,20 @@
 </template>
 
 <script>
+import loader from '@/ux-components/loader/loader.vue';
 import modal from '@/digital-components/modal/modal.vue';
 import { getISSCookie } from '@/helpers/cookie-helper.js';
 
 export default {
     name: 'continue-modal',
     components: {
+        loader,
         modal
     },
     emits: ['continue-previous-referral', 'start-new-referral'],
     data() {
         return {
+            isLoaderDisplayed: false,
             isModalOpened: false
         };
     },
@@ -62,6 +69,9 @@ export default {
         openModal() {
             this.$refs.continueModal.openModal();
         },
+        removeLoader() {
+            this.isLoaderDisplayed = false;
+        },
         setModalStatus(isOpened) {
             this.isModalOpened = isOpened;
         },
@@ -69,6 +79,7 @@ export default {
             this.$refs.continueModal.closeModal();
         },
         continueReferral() {
+            this.isLoaderDisplayed = true;
             this.$emit('continue-previous-referral');
         },
         startNewReferral() {

src/iss-components/site-footer/site-footer.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <footer
-id="infoBox"
-class="footer container-fluid g-5 my-5 px-0">
+            id="infoBox"
+            class="footer container-fluid g-5 my-5 px-0">
             <div
                 class="row d-flex vw-100 mx-0"
                 :class="[
@@ -11,8 +11,8 @@ class="footer container-fluid g-5 my-5 px-0">
                         : 'flex-row-reverse align-items-center',
                 ]">
                 <div
-id="stacked"
-class="col button-col d-flex px-0">
+                    id="stacked"
+                    class="col button-col d-flex px-0">
                     <buttonMain
                         v-if="!isForwardButtonHidden"
                         ref="buttonMain"

src/layouts/welcome-page/welcome-page.spec.js

@@ -12,7 +12,6 @@ import { useMainStore } from '@/store';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
 import routerParams from '@/router/router-constants/router-params';
 import coverageType from '@/constants/coverage-type';
-import globalMethods from '@/global-methods';
 
 // Mock our module for promises.
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());

src/layouts/welcome-page/welcome-page.vue

@@ -462,8 +462,11 @@ export default {
                     console.error(`Error on loading session from cookie ${error}`);
                     this.startNewReferral();
                 } finally {
+                    this.$refs.continueModal.removeLoader();
                     this.$refs.continueModal.closeModal();
                 }
+            } else {
+                this.$refs.continueModal.removeLoader();
             }
         },
         startNewReferral() {