jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
scottkiener-at-safelite 2026-06-23 12:03:01 -04:00
parent cbf3f239f8
commit a16eeed568
2 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue
View file

@ -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>

3
src/layouts/scheduling/scheduling.vue
View file

@ -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