refactor: hero skeleton (#834)

* create hero specific skeleton

* refactor: move skeleton from index to carousel

* refactor: move skeleton to component directory

apps/web/components/ui/HeroCarousel/HeroCarousel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <ClientOnly>
     <Swiper
       :modules="enableModules ? [Pagination, Navigation] : []"
       :slides-per-view="1"
@@ -12,7 +12,11 @@
         <UiHeroContent :hero-item-props="heroItem" />
       </SwiperSlide>
     </Swiper>
-  </div>
+
+    <template #fallback>
+      <UiHeroContentSkeleton />
+    </template>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">

apps/web/components/ui/HeroContent/HeroContentSkeleton.vue

@@ -0,0 +1,16 @@
+<template>
+  <output
+    class="flex flex-col md:flex-row-reverse md:justify-center mx-auto mb-10 text-center animate-pulse p-4 border-neutral-200 border-b"
+  >
+    <div class="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
+      <div class="h-[567px] bg-gray-300 rounded-sm"></div>
+    </div>
+    <div class="p-4 md:p-10 md:max-w-[768px] md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
+      <div class="h-6 sm:h-8 bg-gray-300 rounded-sm w-full mb-2"></div>
+      <div class="h-8 sm:h-10 bg-gray-300 rounded-sm w-3/4 mb-4"></div>
+      <div class="h-4 sm:h-6 bg-gray-300 rounded-sm w-full mb-2"></div>
+      <div class="h-4 sm:h-6 bg-gray-300 rounded-sm w-5/6 mb-6"></div>
+      <div class="h-10 sm:h-12 bg-gray-300 rounded-sm w-1/3"></div>
+    </div>
+  </output>
+</template>

apps/web/pages/index.vue

@@ -1,17 +1,9 @@
 <template>
   <Editor v-if="isEditing" />
   <div v-else class="content">
-    <ClientOnly>
-      <div class="max-w-screen-3xl mx-auto md:px-6 lg:px-10 mb-10">
-        <UiHeroCarousel :hero-item-props="homepage.hero" />
-      </div>
-
-      <template #fallback>
-        <div class="max-w-screen-3xl mx-auto md:px-6 lg:px-10 mb-10">
-          <UiSkeletonLoader style="height: 567px" />
-        </div>
-      </template>
-    </ClientOnly>
+    <div class="max-w-screen-3xl mx-auto md:px-6 lg:px-10 mb-10">
+      <UiHeroCarousel :hero-item-props="homepage.hero" />
+    </div>
 
     <NuxtLazyHydrate when-visible>
       <div class="max-w-screen-3xl mx-auto md:px-6 lg:px-10 mb-10">