CASH-2096 fix by updating lazyload logic also make waitlist be a computed

src/layouts/schedule/schedule.vue

@@ -40,13 +40,6 @@
                         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">
@@ -224,7 +217,6 @@ 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";
@@ -454,15 +446,14 @@ export default {
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             mobilePremiumAppointmentFee: null,
             waitListRequested: null,
-            displayWaitList: null,
             pricingByDayUpchargeLineItem: null,
             includePricingByDayUpcharge: null,
             isPricingByDayExperiment: null,
             pricingByDayBasePrice: null,
             pricingByDayUpcharge: null,
             showPricingByDay: null,
-            selectableDatesInshop: [],
+            selectableDatesInshop: {},
-            selectableDatesMobile: [],
+            selectableDatesMobile: {},
             preSelectedDate: null,
             streetAddress: this.getServiceAddressFromStore(),
             apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
@@ -628,8 +619,9 @@ export default {
             );
             vm.initializeDatePicker().then(() => {
                 vm.showMobileFirstModal();
-                vm.calendarLoadingStatus = "none";
                 vm.hideLoadingModal();
+                vm.calendarLoadingStatus = "none";
+                if (!vm.preSelectedDate) vm.setSelectedDateToFirstAvailable();
             });
         });
     },
@@ -901,6 +893,53 @@ export default {
                 ? this.$refs.mobileFirstModal?.getIsModalOpen()
                 : false;
         },
+        displayWaitList() {
+            if (!this.appointmentType) return false;
+            const firstMobileDateString =
+                Array.isArray(this.selectableDatesMobile.days) &&
+                this.selectableDatesMobile.days.length > 0
+                    ? this.selectableDatesMobile.days[0].date
+                    : null;
+            const firstInshopDateString =
+                Array.isArray(this.selectableDatesInshop.days) &&
+                this.selectableDatesInshop.days.length > 0
+                    ? this.selectableDatesInshop.days[0].date
+                    : null;
+            const dateString =
+                this.isMobileSelected && firstMobileDateString
+                    ? firstMobileDateString
+                    : firstInshopDateString;
+
+            if (
+                experimentMixin.methods.hasSettingEqualTo(
+                    experimentSettings.DISPLAY_WAITLIST,
+                    "true"
+                ) &&
+                dateString
+            ) {
+                const [year, month, day] = dateString.split("-").map(Number);
+                const targetDate = new Date(year, month - 1, day);
+                const currentDate = getTodayDate();
+                const futureDate = new Date(currentDate);
+                const experimentThresholdDays = experimentMixin.methods.hasSetting(
+                    experimentSettings.WAITLIST_THRESHOLD_DAYS
+                )
+                    ? parseInt(
+                          experimentMixin.methods.getSettingValue(
+                              experimentSettings.WAITLIST_THRESHOLD_DAYS
+                          )
+                      )
+                    : 0;
+                futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
+
+                if (targetDate >= futureDate) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+            return false;
+        },
     },
     methods: {
         splitCopyOnCMSPlaceHolder,
@@ -1247,7 +1286,6 @@ export default {
                 await datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData;
             this.selectableDatesMobile =
                 await datePickerInitialData.initialShopTimeSlotsResponse.mobileTimeSlotsData;
-            this.setDisplayWaitList();
 
             if (this.preSelectedDate) {
                 this.selectedDate = this.preSelectedDate;
@@ -1259,7 +1297,6 @@ export default {
                 ) {
                     await this.$nextTick();
                     await this.$refs.datePicker.showAnotherMonth();
-                    this.setDisplayWaitList();
                 }
             }
         },
@@ -1531,39 +1568,6 @@ export default {
             }
             this.showLoadingModal();
         },
-        setDisplayWaitList() {
-            const dateString = this.isMobileSelected
-                ? this.selectableDatesMobile?.days[0]?.date
-                : this.selectableDatesInshop?.days[0]?.date;
-            if (
-                experimentMixin.methods.hasSettingEqualTo(
-                    experimentSettings.DISPLAY_WAITLIST,
-                    "true"
-                ) &&
-                dateString
-            ) {
-                const [year, month, day] = dateString.split("-").map(Number);
-                const targetDate = new Date(year, month - 1, day);
-                const currentDate = getTodayDate();
-                const futureDate = new Date(currentDate);
-                const experimentThresholdDays = experimentMixin.methods.hasSetting(
-                    experimentSettings.WAITLIST_THRESHOLD_DAYS
-                )
-                    ? parseInt(
-                          experimentMixin.methods.getSettingValue(
-                              experimentSettings.WAITLIST_THRESHOLD_DAYS
-                          )
-                      )
-                    : 0;
-                futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
-
-                if (targetDate >= futureDate) {
-                    this.displayWaitList = true;
-                } else {
-                    this.displayWaitList = false;
-                }
-            }
-        },
         updateSupportingItems() {
             const supportingItems = this.getSupportingItems();
 
@@ -1843,7 +1847,6 @@ export default {
                 this.appointmentType = null;
             }
             this.setSelectedDateToFirstAvailable();
-            this.setDisplayWaitList();
         },
         setSelectedDateToFirstAvailable() {
             this.selectedDate = this.getFirstAvailableDate();
@@ -2054,7 +2057,6 @@ export default {
         durationTextBlock,
         shopLocation,
         mobileFeeWaiverAlert,
-        loader,
     },
 };
 </script>
@@ -2073,14 +2075,6 @@ 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 {

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -400,9 +400,24 @@ export default {
             );
         },
         isLazyLoad() {
-            if (this.isMobileAppointment || this.selectedAnswerForTimeSlots) return false;
+            if (this.availableTimeSlots?.length < (this.lazyLoadAmountToLoad + 1)) return false;
+            if (this.isMobileAppointment) return false;
+            if (this.selectedAnswerForTimeSlots && !this.isSelectedInshopTimeSlotShowing) return false;
             return true;
         },
+        availableTimeSlotsForInshop() {
+            return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate?.timeSlots);
+        },
+        isSelectedInshopTimeSlotShowing() {
+            if (!this.selectedAnswerForTimeSlots) return false;
+            const idx = this.availableTimeSlotsForInshop?.findIndex(timeSlot => {
+                return timeSlot.value === this.selectedAnswerForTimeSlots;
+            });
+            if ((idx > -1) && (idx < this.lazyLoadAmountToLoad)) {
+                return true;
+            }
+            return false;
+        },
     },
     methods: {
         updateDropoffAndTimeSlotAnswersFromSelectedRouteCodeData(selectedRouteCodeData) {
@@ -460,6 +475,7 @@ export default {
         //     }
         // },
         getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
+            if (!timeSlotsForSelectedDate) return;
             return timeSlotsForSelectedDate
                 .filter((timeSlot) => {
                     return !isDropOffRouteCode(timeSlot.id);