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

CASH-2880 | abstract the loader animation into component

Browse source
This commit is contained in:
scottkiener-at-safelite 2026-06-23 12:25:47 -04:00
parent a16eeed568
commit 6339f84e0c
2 changed files with 57 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,7 @@
<template> <template>
<div class="inshop-scheduling-card"> <div class="inshop-scheduling-card">
<div <div v-if="isLoading" class="inshop-scheduling-card__panel">
v-if="isLoading" <schedulingCardLoader />
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>
<div v-else class="inshop-scheduling-card__panel"> <div v-else class="inshop-scheduling-card__panel">
<button <button
@ -124,6 +116,7 @@ import {
INSHOP_INITIAL_VISIBLE_TIME_SLOTS, INSHOP_INITIAL_VISIBLE_TIME_SLOTS,
mapInshopTimeSlotToDisplaySlot, mapInshopTimeSlotToDisplaySlot,
} from "@/layouts/schedule/helpers/schedule-helper"; } from "@/layouts/schedule/helpers/schedule-helper";
import schedulingCardLoader from "@/layouts/scheduling/scheduling-card-loader/scheduling-card-loader";
function toTitleCase(str) { function toTitleCase(str) {
if (!str) return ""; if (!str) return "";
@ -332,6 +325,9 @@ export default {
}); });
}, },
}, },
components: {
schedulingCardLoader,
},
}; };
</script> </script>
@ -518,37 +514,5 @@ export default {
cursor: pointer; 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> </style>

51
src/layouts/scheduling/scheduling-card-loader/scheduling-card-loader.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div class="scheduling-card-loader" aria-hidden="true">
<div class="scheduling-card-loader__row">
<span class="scheduling-card-loader__bar scheduling-card-loader__bar--wide"></span>
</div>
<div class="scheduling-card-loader__row">
<span class="scheduling-card-loader__bar scheduling-card-loader__bar--wide"></span>
</div>
</div>
</template>
<script>
export default {
name: "scheduling-card-loader",
};
</script>
<style lang="scss" scoped>
.scheduling-card-loader {
display: flex;
flex-direction: column;
gap: 12px;
&__row {
display: flex;
align-items: center;
gap: 16px;
}
&__bar {
height: 20px;
border-radius: 4px;
background: linear-gradient(90deg, $gray-200 25%, $gray-100 50%, $gray-200 75%);
background-size: 200% 100%;
animation: scheduling-card-shimmer 1.5s ease-in-out infinite;
&--wide {
flex: 1;
}
}
}
@keyframes scheduling-card-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
</style>