Moved Page Interaction Blocking class stuff into a prop

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']" />
+                        <loader
-                        <!-- no-block allows the user to click between shops while availability indicators are loading -->
+                            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(
+            return true;
-                experimentSettings.DISPLAY_AVAILABILITY_INDICATORS,
+            // return experimentMixin.methods.hasSettingEqualTo(
-                "true"
+            //     experimentSettings.DISPLAY_AVAILABILITY_INDICATORS,
-            );
+            //     "true"
+            // );
         },
         isLoaderDisplayed() {
             return this.availabilityRating == null;

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
+    &.allow-ui-interaction::before {
-    &.no-block::before {
+        //no-block to enable clicking on certain buttons with loaders while the loader is actives
         z-index: -1;
     }
 }