From 5078f890cea0080d46d397b8184abc4ab318fd87 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 4 Nov 2022 16:11:36 +0100
Subject: [PATCH] Add loading="lazy" to some images, except categories in
 viewport

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Categories/CategoryCard.vue | 4 +++-
 js/src/components/Home/CategoriesPreview.vue  | 1 +
 js/src/components/Image/LazyImage.vue         | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/js/src/components/Categories/CategoryCard.vue b/js/src/components/Categories/CategoryCard.vue
index d030ed88f..e3c10057a 100644
--- a/js/src/components/Categories/CategoryCard.vue
+++ b/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,
   }
 );
 
diff --git a/js/src/components/Home/CategoriesPreview.vue b/js/src/components/Home/CategoriesPreview.vue
index 495272f4a..e75ccccc2 100644
--- a/js/src/components/Home/CategoriesPreview.vue
+++ b/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 }"
diff --git a/js/src/components/Image/LazyImage.vue b/js/src/components/Image/LazyImage.vue
index 5971d96d3..3d1ada911 100644
--- a/js/src/components/Image/LazyImage.vue
+++ b/js/src/components/Image/LazyImage.vue
@@ -17,6 +17,7 @@
         :class="imageOpacity"
         alt=""
         src=""
+        loading="lazy"
       />
     </div>
   </div>