Added property to loader to allow it not to block the UI

src/digital-components/button-question/button-question.vue

@@ -256,7 +256,9 @@ export default {
     },
     watch: {
         modelValue(newValue, oldValue) {
-            this.resetField();
+            this.resetField({
+                value: newValue
+            });
         },
         answers() {
             //once we get the answers to display from parent, see if we need a GA event to log what we showed

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -23,7 +23,7 @@
                         }}</span>
                         <loader
                             v-if="isLoaderDisplayed"
-                            :class="[this.loaderColor, this.loaderPosition]" />
+                            :class="[this.loaderColor, this.loaderPosition, this.blockUi]" />
                     </div>
                 </div>
                 <div class="row-two">
@@ -52,7 +52,7 @@ export default {
     props: {
         loaderColor: String,
     },
-    mounted() {
+    async beforeMount() {
         this.displayLoader();
         this.additionalButtonData.availabilityRatingCallback(this.modelValue).then((data) => {
             this.availabilityRating = data;
@@ -66,6 +66,7 @@ export default {
             availabilityRating: "None",
             availabilityRatingClass: "",
             loaderPosition: "left",
+            blockUi: "no-block"
         };
     },
     methods: {
@@ -123,10 +124,10 @@ export default {
         &:checked + .list-button-content span {
             font-weight: 500;
         }
-        &:checked + .list-button-content span:nth-child(2) {
-            font-weight: 400;
-            color: $gray-600;
-        }
+        // &:checked + .list-button-content span:nth-child(2) {
+        //     font-weight: 400;
+        //     color: $gray-600;
+        // }
     }
 }
 .list-button-content {
@@ -186,8 +187,8 @@ export default {
 
             .loader {
                 padding: 0 0.25rem 0 0.25rem;
-
-                //position: absolute;
+                padding-top: 0.125rem;
+                padding-bottom: 0.125rem;
             }
 
             .loader:after {
@@ -209,6 +210,8 @@ export default {
             &.gray {
                 color: $gray-600 !important;
                 background-color: $gray-100;
+                padding-left: 0.125rem;
+                padding-right: 0.125rem;
             }
         }
     }

src/layouts/service-location/shop-question/shop-question.vue

@@ -208,26 +208,24 @@ export default {
     },
     watch: {
         selectedAppointmentType: {
-            async handler(newValue) {
+            async handler(newValue) {    
                 this.resetAnswers();
 
                 await nextTick();
-
+           
                 this.selectedProviderNumber = null;
 
-                this.$refs.buttonQuestion?.resetField();
-
                 await nextTick();
 
                 if (newValue !== "Mobile") {
-                    await this.getNextShopsFromList();
+                    this.getNextShopsFromList();
                 }
             },
         },
         shopProviders: {
             async handler(newValue) {
                 await nextTick();
-
+                
                 if (this.selectedAppointmentType) {
                     const selectedShopIndex = this.getSelectedProviderIndex(
                         newValue,

src/ux-components/loader/loader.vue

@@ -3,7 +3,7 @@
         class="loader"
         role="alert"
         aria-label="Loading new page"
-        v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
+        v-bind:class="[this.loaderColor, this.loaderPosition, this.blockUi]"></div>
 </template>
 
 <script>
@@ -19,6 +19,10 @@ export default {
         loaderPosition: {
             type: String,
         },
+        blockUi: {
+            type: Boolean,
+            default: true
+        }
     },
 };
 </script>
@@ -82,5 +86,9 @@ export default {
     &.black:after {
         background-color: $black;
     }
+
+    &.no-block::before {
+        z-index: -1;
+    }
 }
 </style>