Added point-events: all to ensure that the loader button captures all pointer events for the blocking div

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">

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;
     }