CASH-2880 | Add in loading animation to in-shop

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

@@ -1,6 +1,17 @@
 <template>
     <div class="inshop-scheduling-card">
-        <div class="inshop-scheduling-card__panel">
+        <div
+            v-if="isLoading"
+            class="inshop-scheduling-card__panel inshop-scheduling-card__skeleton"
+            aria-hidden="true">
+            <div class="inshop-scheduling-card__skeleton-row">
+                <span class="inshop-scheduling-card__skeleton-bar inshop-scheduling-card__skeleton-bar--wide"></span>
+            </div>
+            <div class="inshop-scheduling-card__skeleton-row">
+                <span class="inshop-scheduling-card__skeleton-bar inshop-scheduling-card__skeleton-bar--wide"></span>
+            </div>
+        </div>
+        <div v-else class="inshop-scheduling-card__panel">
             <button
                 type="button"
                 class="inshop-scheduling-card__header"
@@ -155,6 +166,10 @@ export default {
             type: String,
             default: "DropoffQuestionWidget",
         },
+        isLoading: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -502,5 +517,38 @@ export default {
         text-align: center;
         cursor: pointer;
     }
+
+    &__skeleton {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    &__skeleton-row {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    &__skeleton-bar {
+        height: 20px;
+        border-radius: 4px;
+        background: linear-gradient(90deg, $gray-200 25%, $gray-100 50%, $gray-200 75%);
+        background-size: 200% 100%;
+        animation: inshop-card-shimmer 1.5s ease-in-out infinite;
+
+        &--wide {
+            flex: 1;
+        }
+    }
+}
+
+@keyframes inshop-card-shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
 }
 </style>

src/layouts/scheduling/scheduling.vue

@@ -39,6 +39,7 @@
                         :provider="provider"
                         :timeSlots="getInshopTimeSlotsForSelectedDate(provider.providerNumber)"
                         :radioGroupName="schedulingRadioGroupName"
+                        :isLoading="isLoadingDates"
                         @address-clicked="onInshopAddressClicked(provider)" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -308,7 +309,6 @@ export default {
         },
         async handleRequestMoreDates() {
             this.isLoadingDates = true;
-            this.$refs.loadingModal.showModal();
 
             const newStartDate = toDateString(1, this.datePickerEndDate);
             const newEndDate = toDateString(SCHEDULE_FETCH_DAYS, this.datePickerEndDate);
@@ -351,7 +351,6 @@ export default {
 
             this.datePickerEndDate = newEndDate;
             this.isLoadingDates = false;
-            this.$refs.loadingModal.hideModal();
         },
         forwardButtonAction() {
             const appointmentType = store.getters.order.serviceLocation.appointmentType; // TODO: remove this once we have a proper appointment type