CASH-1790 updates for schedule page

src/layouts/schedule/schedule.vue

@@ -40,6 +40,13 @@
                         cmsWidgetName="AppointmentTypeQuestionWidget"
                         validationRules="option-required"
                         labelBold="true" />
+                    <loader
+                        v-if="
+                            isServiceableMobile && isServiceableInshop && !hasSelectableDatesLoaded
+                        "
+                        class="appointment-type-loader"
+                        loaderColor="blue"
+                        loaderPosition="center" />
                 </div>
             </div>
             <div class="row">
@@ -154,7 +161,8 @@
                         :pricingByDayBasePrice="pricingByDayBasePrice"
                         :pricingByDayUpcharge="pricingByDayUpcharge"
                         :showPricingByDay="showPricingByDay"
-                        :isPricingByDayExperiment="isPricingByDayExperiment" />
+                        :isPricingByDayExperiment="isPricingByDayExperiment"
+                        :loadingStatus="calendarLoadingStatus" />
                     <timeSlotQuestion
                         ref="timeSlotModalQuestion"
                         v-if="showTimeSlotQuestion"
@@ -173,7 +181,8 @@
                         :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
                         :isSameDay="isSameDay"
                         :selectedRouteCodeData="selectedRouteCodeData"
-                        @waitListRequested="handleWaitListRequested" />
+                        @waitListRequested="handleWaitListRequested"
+                        lazyLoadAmountToLoad="10" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -215,6 +224,7 @@ import textBlock from "@/digital-components/text-block/text-block";
 import mobileFeeWaiverAlert from "./mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue";
 
 // Supporting files
+import loader from "@/ux-components/loader/loader";
 import baseMixin from "@/mixins/base-mixin.js";
 import experimentMixin from "@/mixins/experiment-mixin.js";
 import { experimentUniverses, experimentSettings } from "@/constants/experiments";
@@ -485,6 +495,7 @@ export default {
                 experimentSettings.SHOW_MOBILE_FIRST_APPT,
                 "true"
             ),
+            calendarLoadingStatus: "none",
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -595,6 +606,8 @@ export default {
 
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
+            vm.showLoadingModal();
+            vm.calendarLoadingStatus = "initial";
             vm.setCmsContent(resultMap.cmsContent);
             vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
             vm.mobilePremiumAppointmentFee = pricedPremiumFee;
@@ -615,6 +628,8 @@ export default {
             );
             vm.initializeDatePicker().then(() => {
                 vm.showMobileFirstModal();
+                vm.calendarLoadingStatus = "none";
+                vm.hideLoadingModal();
             });
         });
     },
@@ -1147,9 +1162,11 @@ export default {
                 );
             }
         },
-        async onShopSelected(shopQuestionPopUpData) {
+        onShopSelected(shopQuestionPopUpData) {
             this.resetWaitlist();
             this.preSelectedDate = null;
+            this.calendarLoadingStatus = "reinitial";
+            this.$refs.datePicker.isLoading = true;
             this.shopProviderData = shopQuestionPopUpData.shopProviderData;
             const oldProvider = this.selectedProvider;
             const selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => {
@@ -1169,11 +1186,16 @@ export default {
                     this.updateSelectedProvider(selectedProvider);
                 }
             }
-            await this.initializeDatePicker();
+            this.initializeDatePicker().then(() => {
-            this.setSelectedDateToFirstAvailable();
+                this.showMobileFirstModal();
+                this.calendarLoadingStatus = "none";
+                this.$refs.datePicker.isLoading = false;
+                this.setSelectedDateToFirstAvailable();
+            });
         },
         async getMoreScheduleData(startDate, endDate) {
             // called only when "View more dates" is clicked; not on initial page load
+            this.calendarLoadingStatus = "more";
             const moreShopTimeSlots = await getScheduleApiResponse({
                 startDateString: startDate,
                 endDateString: endDate,
@@ -1185,6 +1207,7 @@ export default {
                 includeMobileTimeSlots: this.isServiceableMobile,
                 includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff,
             });
+            this.calendarLoadingStatus = "none";
 
             // ADD API CALL RESULTS TO EXISTING DATE DATA
             this.selectableDatesInshop.days = this.selectableDatesInshop.days.concat(
@@ -1241,7 +1264,7 @@ export default {
                 }
             }
 
-            this.isShowMobileFirstAppt && this.hideLoadingModal();
+            this.isShowMobileFirstAppt;
         },
         getIsRecalAcknowledgedForSchedulingFromStore() {
             return store.getters.order.isRecalAcknowledgedForScheduling;
@@ -1749,6 +1772,7 @@ export default {
             }
 
             this.resetMobileLocation();
+            this.calendarLoadingStatus = "initial";
 
             getShopProviderData(newZipCode.zipCode, this.pageName).then((result) => {
                 this.shopProviderData = result.data;
@@ -1759,6 +1783,7 @@ export default {
                 this.selectedDate = null;
                 this.initializeDatePicker().then(() => {
                     this.showMobileFirstModal();
+                    this.calendarLoadingStatus = "none";
                 });
             });
         },
@@ -2030,6 +2055,7 @@ export default {
         durationTextBlock,
         shopLocation,
         mobileFeeWaiverAlert,
+        loader,
     },
 };
 </script>
@@ -2048,6 +2074,14 @@ export default {
     &.hidden-background {
         display: none;
     }
+    .appointment-type-loader {
+        margin-top: 1.5rem;
+        width: calc(100% - 2rem);
+        &.loader:after {
+            width: 2rem;
+            height: 2rem;
+        }
+    }
 }
 .alert.alert-warning {
     .alert-heading {