Add loading="lazy" to some images, except categories in viewport

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Categories/CategoryCard.vue

@@ -29,7 +29,7 @@
         width="384"
         height="384"
         alt=""
-        loading="lazy"
+        :loading="imageLazy ? 'lazy' : undefined"
       />
     </picture>
     <p
@@ -71,9 +71,11 @@ withDefaults(
   defineProps<{
     category: CategoryStatsModel;
     withDetails?: boolean;
+    imageLazy?: boolean;
   }>(),
   {
     withDetails: false,
+    imageLazy: true,
   }
 );
 

js/src/components/Home/CategoriesPreview.vue

@@ -7,6 +7,7 @@
       :key="category.key"
       :category="category"
       :with-details="false"
+      :imageLazy="false"
     />
     <router-link
       :to="{ name: RouteName.CATEGORIES }"

js/src/components/Image/LazyImage.vue

@@ -17,6 +17,7 @@
         :class="imageOpacity"
         alt=""
         src=""
+        loading="lazy"
       />
     </div>
   </div>