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

CASH-2880 | Add loader to mobile scheduling card

Browse source
This commit is contained in:
scottkiener-at-safelite 2026-06-23 12:30:58 -04:00
parent 6339f84e0c
commit 1154e09105
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="mobile-scheduling-card"> <div class="mobile-scheduling-card">
<div v-if="showFreeFlag" class="mobile-scheduling-card__free-flag"> <div v-if="showFreeFlag && !isLoading" class="mobile-scheduling-card__free-flag">
<img <img
class="mobile-scheduling-card__free-flag-icon" class="mobile-scheduling-card__free-flag-icon"
src="@/assets/img/party.svg" src="@/assets/img/party.svg"
@ -8,7 +8,10 @@
aria-hidden="true" /> aria-hidden="true" />
<span class="mobile-scheduling-card__free-flag-text">{{ freeFlagText }}</span> <span class="mobile-scheduling-card__free-flag-text">{{ freeFlagText }}</span>
</div> </div>
<div <div v-if="isLoading" class="mobile-scheduling-card__panel">
<schedulingCardLoader />
</div>
<div v-else
class="mobile-scheduling-card__panel" class="mobile-scheduling-card__panel"
:class="{ 'mobile-scheduling-card__panel--with-free-flag': showFreeFlag }"> :class="{ 'mobile-scheduling-card__panel--with-free-flag': showFreeFlag }">
<button <button
@ -86,7 +89,7 @@
<script> <script>
import { PREMIUM_TIME_SLOT_ID_FLAG, AppointmentTypeStrings } from "@/constants/schedule-constants"; import { PREMIUM_TIME_SLOT_ID_FLAG, AppointmentTypeStrings } from "@/constants/schedule-constants";
import { militaryToTwelveHourTime } from "@/layouts/schedule/helpers/schedule-helper"; import { militaryToTwelveHourTime } from "@/layouts/schedule/helpers/schedule-helper";
import schedulingCardLoader from "@/layouts/scheduling/scheduling-card-loader/scheduling-card-loader.vue";
export default { export default {
name: "mobile-scheduling-card", name: "mobile-scheduling-card",
emits: ["update:modelValue", "zip-code-clicked"], emits: ["update:modelValue", "zip-code-clicked"],
@ -123,6 +126,10 @@ export default {
type: String, type: String,
default: "MobileCardWidget", default: "MobileCardWidget",
}, },
isLoading: {
type: Boolean,
default: false,
},
}, },
data() { data() {
return { return {
@ -228,6 +235,9 @@ export default {
return routeCode + PREMIUM_TIME_SLOT_ID_FLAG; return routeCode + PREMIUM_TIME_SLOT_ID_FLAG;
}, },
}, },
components: {
schedulingCardLoader,
},
}; };
</script> </script>

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

@ -29,6 +29,7 @@
:zipCode="serviceZipCode" :zipCode="serviceZipCode"
:showFreeFlag="showMobileFreeFlag" :showFreeFlag="showMobileFreeFlag"
:radioGroupName="schedulingRadioGroupName" :radioGroupName="schedulingRadioGroupName"
:isLoading="isLoadingDates"
@zip-code-clicked="onMobileZipCodeClicked" /> @zip-code-clicked="onMobileZipCodeClicked" />
<inshopSchedulingCard <inshopSchedulingCard
v-for="{ provider } in inShopProvidersAndTimeslots" v-for="{ provider } in inShopProvidersAndTimeslots"