diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index 3ade2058e..a7f78cc2c 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -10,16 +10,21 @@
                 class="date-picker__nav-icon date-picker__nav-icon--flipped"
                 alt="" />
         </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
-                v-for="date in visibleDates"
+                v-for="(date, index) in visibleDates"
                 :key="date.value"
                 class="date-picker__day-card d-flex flex-column align-items-center justify-content-center"
                 :class="{
                     'date-picker__day-card--selected': isSelected(date.value),
                     '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-label="`${date.dayAbbr} ${date.monthAbbr} ${date.day}`"
                 @click="selectDate(date)">
@@ -308,6 +313,23 @@ export default {
                 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,
@@ -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>