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

CASH-2880 | Add loader to date-picker for scheduling

Browse source
This commit is contained in:
scottkiener-at-safelite 2026-06-24 10:42:36 -04:00
parent 07a450104f
commit 5d8c5b44f5
1 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/layouts/scheduling/date-picker/date-picker.vue
View file

@ -10,16 +10,21 @@
class="date-picker__nav-icon date-picker__nav-icon--flipped" class="date-picker__nav-icon date-picker__nav-icon--flipped"
alt="" /> alt="" />
</button> </button>
<div class="date-picker__track d-flex flex-grow-1"> <div
class="date-picker__track d-flex flex-grow-1"
:class="{ 'date-picker__track--loading': isLoadingDates }"
:style="isLoadingDates ? { '--card-count': windowSize } : null">
<button <button
v-for="date in visibleDates" v-for="(date, index) in visibleDates"
:key="date.value" :key="date.value"
class="date-picker__day-card d-flex flex-column align-items-center justify-content-center" class="date-picker__day-card d-flex flex-column align-items-center justify-content-center"
:class="{ :class="{
'date-picker__day-card--selected': isSelected(date.value), 'date-picker__day-card--selected': isSelected(date.value),
'date-picker__day-card--disabled': !date.isAvailable, 'date-picker__day-card--disabled': !date.isAvailable,
'date-picker__day-card--loading': isLoadingDates,
}" }"
:disabled="!date.isAvailable" :style="isLoadingDates ? { '--card-index': index } : null"
:disabled="!date.isAvailable || isLoadingDates"
:aria-pressed="isSelected(date.value)" :aria-pressed="isSelected(date.value)"
:aria-label="`${date.dayAbbr} ${date.monthAbbr} ${date.day}`" :aria-label="`${date.dayAbbr} ${date.monthAbbr} ${date.day}`"
@click="selectDate(date)"> @click="selectDate(date)">
@ -308,6 +313,23 @@ export default {
color: $gray-300; color: $gray-300;
} }
} }
&--loading,
&--loading.date-picker__day-card--selected,
&--loading.date-picker__day-card--disabled {
border-color: $gray-200;
cursor: default;
background-color: $gray-200;
background-image: linear-gradient(90deg, $gray-200 25%, $gray-100 50%, $gray-200 75%);
background-repeat: no-repeat;
background-size: calc(var(--card-count) * 200%) 100%;
animation: date-picker-shimmer 1.5s ease-in-out infinite;
.date-picker__day-abbr,
.date-picker__day-date {
visibility: hidden;
}
}
} }
&__day-abbr, &__day-abbr,
@ -336,4 +358,13 @@ export default {
} }
} }
} }
@keyframes date-picker-shimmer {
0% {
background-position-x: calc(var(--card-index) / (var(--card-count) - 1) * 100% + 100%);
}
100% {
background-position-x: calc(var(--card-index) / (var(--card-count) - 1) * 100% - 100%);
}
}
</style> </style>