Fix images

woonuxt_base/components/CategoryCard.vue

@@ -14,11 +14,12 @@ const ImageHeight = Math.round(imageWidth * 1.25);
     <NuxtImg
       :width="imageWidth"
       :height="ImageHeight"
-      class="absolute inset-0 object-cover w-full h-full skeleton"
+      class="absolute inset-0 object-cover w-full h-full"
       :src="node.image?.sourceUrl || fallbackImage"
       :alt="node.image?.altText || node.name"
       :title="node.image?.title || node.name"
-      loading="lazy" />
+      loading="lazy"
+      placeholder />
     <div class="absolute inset-x-0 bottom-0 opacity-50 bg-gradient-to-t from-black to-transparent h-1/2" />
     <span class="relative z-10 mt-auto mb-2 text-sm font-semibold text-white capitalize md:text-base md:mb-4" v-html="node.name" />
   </NuxtLink>

woonuxt_base/components/generalElements/HeroBanner.vue

@@ -3,13 +3,15 @@
     <NuxtImg
       width="1400"
       height="800"
-      class="object-cover w-full h-[420px] lg:h-[560px] xl:h-[640px] skeleton"
+      class="object-cover w-full h-[420px] lg:h-[560px] xl:h-[640px]"
       src="/images/hero-4.jpg"
       alt="Hero image"
       loading="eager"
       sizes="sm:100vw lg:1400px"
       fetchpriority="high"
-      preload />
+      preload
+      placeholder
+      placeholder-class="blur-xl" />
     <div class="container absolute inset-0 flex flex-col items-start justify-center bg-gradient-to-l from-gray-200 md:bg-none p-8">
       <h1 class="text-3xl font-bold md:mb-4 md:text-4xl lg:text-6xl">Just landed.</h1>
       <h2 class="text-lg font-bold md:mb-4 lg:text-3xl">The New Year Collection</h2>

woonuxt_base/components/productElements/ProductCard.vue

@@ -48,7 +48,8 @@ const imagetoDisplay = computed<string>(() => {
         :alt="node.image?.altText || node.name"
         :title="node.image?.title || node.name"
         :loading="index <= 3 ? 'eager' : 'lazy'"
-        class="skeleton" />
+        placeholder
+        placeholder-class="blur-xl" />
     </NuxtLink>
     <div class="p-2">
       <StarRating :rating="node.averageRating" :count="node.reviewCount" />

woonuxt_base/components/productElements/ProductImageGallery.vue

@@ -41,25 +41,28 @@ watch(
   <div>
     <SaleBadge :node="node" class="absolute text-base top-4 right-4" />
     <NuxtImg
-      class="rounded-xl object-contain w-full min-w-[350px] skeleton"
-      :imgAttrs="{ class: 'rounded-xl object-contain w-full min-w-[350px] skeleton' }"
+      class="rounded-xl object-contain w-full min-w-[350px]"
       width="640"
       height="640"
       :alt="imageToShow.altText || node.name"
       :title="imageToShow.title || node.name"
       :src="imageToShow.sourceUrl || fallbackImage"
-      fetchpriority="high" />
+      fetchpriority="high"
+      placeholder
+      placeholder-class="blur-xl" />
     <div v-if="gallery.nodes.length" class="my-4 gallery-images">
       <NuxtImg
         v-for="galleryImg in galleryImages"
         :key="galleryImg.databaseId"
-        class="cursor-pointer rounded-xl skeleton"
+        class="cursor-pointer rounded-xl"
         width="640"
         height="640"
         :src="galleryImg.sourceUrl"
         :alt="galleryImg.altText || node.name"
         :title="galleryImg.title || node.name"
         @click.native="changeImage(galleryImg)"
+        placeholder
+        placeholder-class="blur-xl"
         loading="lazy" />
     </div>
   </div>