From 66d1413eb5657d9aeb91191a6aa04ff4006aabf4 Mon Sep 17 00:00:00 2001
From: Huskydog9988 <39809509+Huskydog9988@users.noreply.github.com>
Date: Mon, 7 Apr 2025 17:28:40 -0400
Subject: [PATCH] fix: gamecarousel layout shifts (mostly)

---
 components/GameCarousel.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/GameCarousel.vue b/components/GameCarousel.vue
index 3cbe2267..575cc0cb 100644
--- a/components/GameCarousel.vue
+++ b/components/GameCarousel.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="currentComponent">
-    <ClientOnly>
+    <ClientOnly fallback-tag="span">
       <VueCarousel :itemsToShow="singlePage" :itemsToScroll="singlePage">
         <VueSlide
           class="justify-start"
@@ -14,6 +14,21 @@
           <VueNavigation />
         </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>
+      </template>
     </ClientOnly>
   </div>
 </template>