From 029d65ae44c6176a436ada39de3101dbe2792216 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 17 Jul 2023 08:44:43 -0400
Subject: [PATCH 1/2] Moved Page Interaction Blocking class stuff into a prop

---
 .../shop-list-button/shop-list-button.vue        | 15 +++++++++------
 src/ux-components/loader/loader.vue              | 16 +++++++++++++---
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index 3006c8f25..510d9bbbf 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -25,8 +25,10 @@
                         <span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">{{
                             badgeText
                         }}</span>
-                        <loader v-if="isLoaderDisplayed" :class="['left', 'no-block']" />
-                        <!-- no-block allows the user to click between shops while availability indicators are loading -->
+                        <loader
+                            v-if="isLoaderDisplayed"
+                            :loaderPosition="left"
+                            :allowPageInteraction="true" />
                     </div>
                 </div>
                 <div class="row-two">
@@ -74,10 +76,11 @@ export default {
     },
     computed: {
         displayAvailabilityIndicators() {
-            return experimentMixin.methods.hasSettingEqualTo(
-                experimentSettings.DISPLAY_AVAILABILITY_INDICATORS,
-                "true"
-            );
+            return true;
+            // return experimentMixin.methods.hasSettingEqualTo(
+            //     experimentSettings.DISPLAY_AVAILABILITY_INDICATORS,
+            //     "true"
+            // );
         },
         isLoaderDisplayed() {
             return this.availabilityRating == null;
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 0de04da27..eb244c796 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -3,7 +3,11 @@
         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.allowPageInteraction ? 'allow-ui-interaction' : '',
+        ]"></div>
 </template>
 
 <script>
@@ -19,6 +23,12 @@ export default {
         loaderPosition: {
             type: String,
         },
+        /* Set to true for loaders where UI interaction must be allowed to continue while the loader is active 
+           (See example shop-list-button) */
+        allowPageInteraction: {
+            type: Boolean,
+            default: false,
+        },
     },
 };
 </script>
@@ -83,8 +93,8 @@ export default {
     &.black:after {
         background-color: $black;
     }
-    //no-block to enable clicking on certain buttons with loaders while the loader is actives
-    &.no-block::before {
+    &.allow-ui-interaction::before {
+        //no-block to enable clicking on certain buttons with loaders while the loader is actives
         z-index: -1;
     }
 }

From 1a1e97485cee4288a27beedc82d330bf8f431d49 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 17 Jul 2023 08:52:25 -0400
Subject: [PATCH 2/2] Removed commented test code

---
 .../shop-question/shop-list-button/shop-list-button.vue  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index 510d9bbbf..31c415a2d 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -76,11 +76,10 @@ export default {
     },
     computed: {
         displayAvailabilityIndicators() {
-            return true;
-            // return experimentMixin.methods.hasSettingEqualTo(
-            //     experimentSettings.DISPLAY_AVAILABILITY_INDICATORS,
-            //     "true"
-            // );
+            return experimentMixin.methods.hasSettingEqualTo(
+                experimentSettings.DISPLAY_AVAILABILITY_INDICATORS,
+                "true"
+            );
         },
         isLoaderDisplayed() {
             return this.availabilityRating == null;