From 22f5db7bdb3b6bdbdd594d6f9562c4dba1fd070c Mon Sep 17 00:00:00 2001
From: Morgan <103436411+MorganKryze@users.noreply.github.com>
Date: Wed, 17 Apr 2024 19:07:13 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20make=20first=20image=20eager=20t?=
 =?UTF-8?q?o=20load?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/src/components/GalleryImage.astro    |  7 ++++---
 src/src/pages/collections/france.astro   | 12 ++++++------
 src/src/pages/collections/sardegna.astro | 12 ++++++------
 src/src/pages/collections/tales.astro    | 12 ++++++------
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/src/components/GalleryImage.astro b/src/src/components/GalleryImage.astro
index a1d5c56..e2b3bbe 100644
--- a/src/src/components/GalleryImage.astro
+++ b/src/src/components/GalleryImage.astro
@@ -4,14 +4,15 @@ import "../animations/hide.astro";
 
 interface Props {
   image: string;
+  loading?: 'lazy' | 'eager';
 }
 
-const { image } = Astro.props;
+const { image, loading = 'lazy' } = Astro.props;
 ---
 
 <img
   src={`/Portfolio${image}`}
   alt="gallery"
   class="w-full object-cover rounded-md hide-2"
-  loading="lazy"
-/>
+  loading={loading}
+/>
\ No newline at end of file
diff --git a/src/src/pages/collections/france.astro b/src/src/pages/collections/france.astro
index f84435c..2b790d8 100644
--- a/src/src/pages/collections/france.astro
+++ b/src/src/pages/collections/france.astro
@@ -20,8 +20,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
   nextCollectionLink="sardegna"
 >
   <div id="Column-Left" class="flex flex-col gap-6">
-    <GalleryImage image="/img/france/im3.jpg" />
-    <GalleryImage image="/img/france/im7.jpg" />
+    <GalleryImage image="/img/france/im3.jpg" loading="eager" />
+    <GalleryImage image="/img/france/im7.jpg" loading="eager" />
     <GalleryImage image="/img/france/im21.jpg" />
     <GalleryImage image="/img/france/im8.jpg" />
     <GalleryImage image="/img/france/im26.jpg" />
@@ -40,8 +40,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
     <GalleryImage image="/img/france/im55.jpg" />
   </div>
   <div id="Column-Center" class="flex flex-col gap-6">
-    <GalleryImage image="/img/france/im5.jpg" />
-    <GalleryImage image="/img/france/im6.jpg" />
+    <GalleryImage image="/img/france/im5.jpg" loading="eager" />
+    <GalleryImage image="/img/france/im6.jpg" loading="eager" />
     <GalleryImage image="/img/france/im2.jpg" />
     <GalleryImage image="/img/france/im9.jpg" />
     <GalleryImage image="/img/france/im45.jpg" />
@@ -61,8 +61,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
     <GalleryImage image="/img/france/im51.jpg" />
   </div>
   <div id="Column-Right" class="flex flex-col gap-6">
-    <GalleryImage image="/img/france/im4.jpg" />
-    <GalleryImage image="/img/france/im1.jpg" />
+    <GalleryImage image="/img/france/im4.jpg" loading="eager" />
+    <GalleryImage image="/img/france/im1.jpg" loading="eager" />
     <GalleryImage image="/img/france/im23.jpg" />
     <GalleryImage image="/img/france/im10.jpg" />
     <GalleryImage image="/img/france/im24.jpg" />
diff --git a/src/src/pages/collections/sardegna.astro b/src/src/pages/collections/sardegna.astro
index 62fff25..7e9ff86 100644
--- a/src/src/pages/collections/sardegna.astro
+++ b/src/src/pages/collections/sardegna.astro
@@ -19,8 +19,8 @@ import CollectionLayout from "../../layouts/CollectionLayout.astro";
   nextCollectionLink="ireland"
 >
   <div id="Column-Left" class="flex flex-col gap-6">
-    <GalleryImage image="/img/sardegna/im38.jpg" />
-    <GalleryImage image="/img/sardegna/im59.jpg" />
+    <GalleryImage image="/img/sardegna/im38.jpg" loading="eager" />
+    <GalleryImage image="/img/sardegna/im59.jpg" loading="eager" />
     <GalleryImage image="/img/sardegna/im20.jpg" />
     <GalleryImage image="/img/sardegna/im18.jpg" />
     <GalleryImage image="/img/sardegna/im37.jpg" />
@@ -28,16 +28,16 @@ import CollectionLayout from "../../layouts/CollectionLayout.astro";
     <GalleryImage image="/img/sardegna/im3.jpg" />
   </div>
   <div id="Column-Center" class="flex flex-col gap-6">
-    <GalleryImage image="/img/sardegna/im45.jpg" />
-    <GalleryImage image="/img/sardegna/im29.jpg" />
+    <GalleryImage image="/img/sardegna/im45.jpg" loading="eager" />
+    <GalleryImage image="/img/sardegna/im29.jpg" loading="eager" />
     <GalleryImage image="/img/sardegna/im42.jpg" />
     <GalleryImage image="/img/sardegna/im17.jpg" />
     <GalleryImage image="/img/sardegna/im27.jpg" />
     <GalleryImage image="/img/sardegna/im36.jpg" />
   </div>
   <div id="Column-Right" class="flex flex-col gap-6">
-    <GalleryImage image="/img/sardegna/im39.jpg" />
-    <GalleryImage image="/img/sardegna/im15.jpg" />
+    <GalleryImage image="/img/sardegna/im39.jpg" loading="eager" />
+    <GalleryImage image="/img/sardegna/im15.jpg" loading="eager" />
     <GalleryImage image="/img/sardegna/im19.jpg" />
     <GalleryImage image="/img/sardegna/im16.jpg" />
     <GalleryImage image="/img/sardegna/im28.jpg" />
diff --git a/src/src/pages/collections/tales.astro b/src/src/pages/collections/tales.astro
index 02e3b80..b871268 100644
--- a/src/src/pages/collections/tales.astro
+++ b/src/src/pages/collections/tales.astro
@@ -19,8 +19,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
   nextCollectionLink="france"
 >
   <div class="flex flex-col gap-6">
-    <GalleryImage image="/img/rototo/im2.jpg" />
-    <GalleryImage image="/img/rototo/im17.jpg" />
+    <GalleryImage image="/img/rototo/im2.jpg" loading="eager" />
+    <GalleryImage image="/img/rototo/im17.jpg" loading="eager" />
     <GalleryImage image="/img/rototo/im16.jpg" />
     <GalleryImage image="/img/rototo/im14.jpg" />
     <GalleryImage image="/img/rototo/im6.jpg" />
@@ -29,8 +29,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
     <GalleryImage image="/img/rototo/im24.jpg" />
   </div>
   <div class="flex flex-col gap-6">
-    <GalleryImage image="/img/rototo/im18.jpg" />
-    <GalleryImage image="/img/rototo/im20.jpg" />
+    <GalleryImage image="/img/rototo/im18.jpg" loading="eager" />
+    <GalleryImage image="/img/rototo/im20.jpg" loading="eager" />
     <GalleryImage image="/img/rototo/im22.jpg" />
     <GalleryImage image="/img/rototo/im23.jpg" />
     <GalleryImage image="/img/rototo/im15.jpg" />
@@ -39,8 +39,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
     <GalleryImage image="/img/rototo/im3.jpg" />
   </div>
   <div class="flex flex-col gap-6">
-    <GalleryImage image="/img/rototo/im1.jpg" />
-    <GalleryImage image="/img/rototo/im19.jpg" />
+    <GalleryImage image="/img/rototo/im1.jpg" loading="eager"/>
+    <GalleryImage image="/img/rototo/im19.jpg" loading="eager"/>
     <GalleryImage image="/img/rototo/im21.jpg" />
     <GalleryImage image="/img/rototo/im13.jpg" />
     <GalleryImage image="/img/rototo/im7.jpg" />