From 6339f84e0c8d20468514e7b0438293e8a79c7f22 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Tue, 23 Jun 2026 12:25:47 -0400
Subject: [PATCH] CASH-2880 | abstract the loader animation into component

---
 .../inshop-scheduling-card.vue                | 48 +++--------------
 .../scheduling-card-loader.vue                | 51 +++++++++++++++++++
 2 files changed, 57 insertions(+), 42 deletions(-)
 create mode 100644 src/layouts/scheduling/scheduling-card-loader/scheduling-card-loader.vue

diff --git a/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue b/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue
index 181bef75c..f9881c0d4 100644
--- a/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue
+++ b/src/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card.vue
@@ -1,15 +1,7 @@
 <template>
     <div class="inshop-scheduling-card">
-        <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 v-if="isLoading" class="inshop-scheduling-card__panel">
+            <schedulingCardLoader />
         </div>
         <div v-else class="inshop-scheduling-card__panel">
             <button
@@ -124,6 +116,7 @@ import {
     INSHOP_INITIAL_VISIBLE_TIME_SLOTS,
     mapInshopTimeSlotToDisplaySlot,
 } from "@/layouts/schedule/helpers/schedule-helper";
+import schedulingCardLoader from "@/layouts/scheduling/scheduling-card-loader/scheduling-card-loader";
 
 function toTitleCase(str) {
     if (!str) return "";
@@ -332,6 +325,9 @@ export default {
             });
         },
     },
+    components: {
+        schedulingCardLoader,
+    },
 };
 </script>
 
@@ -518,37 +514,5 @@ export default {
         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>
diff --git a/src/layouts/scheduling/scheduling-card-loader/scheduling-card-loader.vue b/src/layouts/scheduling/scheduling-card-loader/scheduling-card-loader.vue
new file mode 100644
index 000000000..4fd506730
--- /dev/null
+++ b/src/layouts/scheduling/scheduling-card-loader/scheduling-card-loader.vue
@@ -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>