From 871fcce3e2a3fc5101aaeef54225255930bbde61 Mon Sep 17 00:00:00 2001
From: Huskydog9988 <39809509+Huskydog9988@users.noreply.github.com>
Date: Mon, 7 Apr 2025 21:28:58 -0400
Subject: [PATCH] feat: add skeleton for loading game carousel

---
 server/components/GameCarousel.vue | 20 ++++++++------------
 server/components/GamePanel.vue    |  9 +--------
 server/components/SkeletonCard.vue | 15 +++++++++++++++
 3 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 server/components/SkeletonCard.vue

diff --git a/server/components/GameCarousel.vue b/server/components/GameCarousel.vue
index 575cc0cb..33e49c2a 100644
--- a/server/components/GameCarousel.vue
+++ b/server/components/GameCarousel.vue
@@ -15,18 +15,14 @@
         </template>
       </VueCarousel>
       <template #fallback>
-        <!-- this will be rendered on server side -->
-        <div class="min-h-55">
-          <div class="flex items-center justify-center p-4">
-            <div
-              class="flex items-center space-x-2 animate-pulse rounded-xl shadow-lg p-6"
-            >
-              <div class="w-4 h-4 bg-gray-400 rounded-full"></div>
-              <div class="w-4 h-4 bg-gray-400 rounded-full"></div>
-              <div class="w-4 h-4 bg-gray-400 rounded-full"></div>
-              <span class="ml-4 text-gray-200 font-medium">Loading...</span>
-            </div>
-          </div>
+        <div
+          class="flex flex-nowrap flex-row overflow-hidden whitespace-nowrap"
+        >
+          <SkeletonCard
+            v-for="index in 10"
+            :key="index"
+            class="mr-3 flex-none"
+          />
         </div>
       </template>
     </ClientOnly>
diff --git a/server/components/GamePanel.vue b/server/components/GamePanel.vue
index 9eeb88c9..c32db181 100644
--- a/server/components/GamePanel.vue
+++ b/server/components/GamePanel.vue
@@ -32,14 +32,7 @@
       </p>
     </div>
   </NuxtLink>
-  <div
-    v-else
-    class="rounded-lg w-48 h-64 bg-zinc-800/50 flex items-center justify-center transition-all duration-300 hover:bg-zinc-800"
-  >
-    <p class="text-zinc-700 text-sm font-semibold font-display uppercase">
-      no game
-    </p>
-  </div>
+  <SkeletonCard v-else message="no game" />>
 </template>
 
 <script setup lang="ts">
diff --git a/server/components/SkeletonCard.vue b/server/components/SkeletonCard.vue
new file mode 100644
index 00000000..fb99d1cc
--- /dev/null
+++ b/server/components/SkeletonCard.vue
@@ -0,0 +1,15 @@
+<template>
+  <div
+    class="rounded-lg w-48 h-64 bg-zinc-800/50 flex items-center justify-center transition-all duration-300 hover:bg-zinc-800 animate-pulse"
+  >
+    <p class="text-zinc-700 text-sm font-semibold font-display uppercase">
+      {{ props.message }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  message?: string;
+}>();
+</script>