feat: add skeleton for loading game carousel

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>

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">

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>