From 2e53590c5d5123e59927ca2289feb7dc86267e06 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sun, 27 Sep 2026 16:22:02 -0700
Subject: [PATCH] Blend schedule loading placeholders with card colors

---
 src/components/ScheduleRow.vue | 17 +++++------------
 src/components/StageImage.vue  |  7 +++----
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/ScheduleRow.vue b/src/components/ScheduleRow.vue
index 8701196..18a9f25 100644
--- a/src/components/ScheduleRow.vue
+++ b/src/components/ScheduleRow.vue
@@ -21,9 +21,7 @@
         </div>
       </div>
     </div>
-    <div v-else class="sm:hidden h-9 bg-zinc-500 rounded-sm motion-safe:animate-pulse" aria-hidden="true">
-      &nbsp;
-    </div>
+    <SkeletonBlock v-else class="sm:hidden h-9" />
 
     <div class="flex space-x-1">
       <div class="flex-1 items-center text-center font-splatoon2 hidden sm:flex">
@@ -55,15 +53,9 @@
           </template>
 
           <template v-else>
-            <div class="h-5 lg:h-7 bg-zinc-500 rounded-sm motion-safe:animate-pulse" aria-hidden="true">
-&nbsp;
-            </div>
-            <div class="h-5 mx-8 bg-zinc-500 rounded-sm motion-safe:animate-pulse" aria-hidden="true">
-&nbsp;
-            </div>
-            <div class="h-5 mx-4 bg-zinc-500 rounded-sm motion-safe:animate-pulse" aria-hidden="true">
-&nbsp;
-            </div>
+            <SkeletonBlock class="h-5 lg:h-7" />
+            <SkeletonBlock class="h-5 mx-8" />
+            <SkeletonBlock class="h-5 mx-4" />
           </template>
         </div>
       </div>
@@ -94,6 +86,7 @@
 <script setup>
 import StageImage from './StageImage.vue';
 import RuleIcon from './RuleIcon.vue';
+import SkeletonBlock from './loading/SkeletonBlock.vue';
 import { formatDurationFromNow } from '@/common/time';
 import { useTimeStore } from '@/stores/time.mjs';
 
diff --git a/src/components/StageImage.vue b/src/components/StageImage.vue
index 9c96a0f..17430db 100644
--- a/src/components/StageImage.vue
+++ b/src/components/StageImage.vue
@@ -1,10 +1,8 @@
 <template>
   <button :disabled="loading || !stage" class="block relative" @click.prevent="open = true">
-    <div class="bg-zinc-700 aspect-2/1 overflow-hidden" :class="imgClass">
+    <div class="aspect-2/1 overflow-hidden" :class="[imgClass, { 'bg-zinc-700': !loading && lowRes }]">
       <img v-if="!loading && lowRes" :src="lowRes" width="400" height="200" />
-      <div v-else class="bg-zinc-500 motion-safe:animate-pulse h-full" :class="imgClass" aria-hidden="true">
-&nbsp;
-      </div>
+      <SkeletonBlock v-else class="h-full rounded-none" />
     </div>
 
     <div
@@ -36,6 +34,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import StageDialog from './StageDialog.vue';
+import SkeletonBlock from './loading/SkeletonBlock.vue';
 
 const props = defineProps({
   loading: Boolean,