From c42c733bdb024a26f77c92def454129f73e6f3e6 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 14 Jul 2023 14:26:25 -0400
Subject: [PATCH] Added point-events: all to ensure that the loader button
 captures all pointer events for the blocking div

---
 .../shop-list-button/shop-list-button.vue              |  1 +
 src/ux-components/loader/loader.vue                    | 10 +++-------
 2 files changed, 4 insertions(+), 7 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 df80fdffa..3006c8f25 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
@@ -26,6 +26,7 @@
                             badgeText
                         }}</span>
                         <loader v-if="isLoaderDisplayed" :class="['left', 'no-block']" />
+                        <!-- no-block allows the user to click between shops while availability indicators are loading -->
                     </div>
                 </div>
                 <div class="row-two">
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 0635614b8..0de04da27 100644
--- a/src/ux-components/loader/loader.vue
+++ b/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, this.blockUi]"></div>
+        v-bind:class="[this.loaderColor, this.loaderPosition]"></div>
 </template>
 
 <script>
@@ -19,11 +19,6 @@ export default {
         loaderPosition: {
             type: String,
         },
-        /* Controls whether we block the UI when the loader is active or now, defaults to true*/
-        blockUi: {
-            type: Boolean,
-            default: true,
-        },
     },
 };
 </script>
@@ -31,6 +26,7 @@ export default {
 <style lang="scss">
 .loader {
     display: flex;
+    pointer-events: all;
 
     //Open an overlay to prevent page interaction
     &:before {
@@ -87,7 +83,7 @@ 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 {
         z-index: -1;
     }