CASH-2880 | Add loader to mobile scheduling card

src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mobile-scheduling-card">
-        <div v-if="showFreeFlag" class="mobile-scheduling-card__free-flag">
+        <div v-if="showFreeFlag && !isLoading" class="mobile-scheduling-card__free-flag">
             <img
                 class="mobile-scheduling-card__free-flag-icon"
                 src="@/assets/img/party.svg"
@@ -8,7 +8,10 @@
                 aria-hidden="true" />
             <span class="mobile-scheduling-card__free-flag-text">{{ freeFlagText }}</span>
         </div>
-        <div
+        <div v-if="isLoading" class="mobile-scheduling-card__panel">
+            <schedulingCardLoader />
+        </div>
+        <div v-else
             class="mobile-scheduling-card__panel"
             :class="{ 'mobile-scheduling-card__panel--with-free-flag': showFreeFlag }">
             <button
@@ -86,7 +89,7 @@
 <script>
 import { PREMIUM_TIME_SLOT_ID_FLAG, AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { militaryToTwelveHourTime } from "@/layouts/schedule/helpers/schedule-helper";
-
+import schedulingCardLoader from "@/layouts/scheduling/scheduling-card-loader/scheduling-card-loader.vue";
 export default {
     name: "mobile-scheduling-card",
     emits: ["update:modelValue", "zip-code-clicked"],
@@ -123,6 +126,10 @@ export default {
             type: String,
             default: "MobileCardWidget",
         },
+        isLoading: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -228,6 +235,9 @@ export default {
             return routeCode + PREMIUM_TIME_SLOT_ID_FLAG;
         },
     },
+    components: {
+        schedulingCardLoader,
+    },
 };
 </script>
 

src/layouts/scheduling/scheduling.vue

@@ -29,6 +29,7 @@
                         :zipCode="serviceZipCode"
                         :showFreeFlag="showMobileFreeFlag"
                         :radioGroupName="schedulingRadioGroupName"
+                        :isLoading="isLoadingDates"
                         @zip-code-clicked="onMobileZipCodeClicked" />
                     <inshopSchedulingCard
                         v-for="{ provider } in inShopProvidersAndTimeslots"