From 2c10e5b3d22538a93d73ed8685457d5d2a5c6277 Mon Sep 17 00:00:00 2001
From: Ethan Lee <ethan.lee@emory.edu>
Date: Fri, 6 Dec 2024 17:02:46 -0500
Subject: [PATCH] Optimize image loading methods

---
 src/app/sections/0-landing/graphics.jsx  | 11 ++++++++---
 src/app/sections/1-about/graphics.jsx    |  1 +
 src/app/sections/2-tracks/graphics.jsx   |  1 +
 src/app/sections/3-schedule/graphics.jsx |  1 +
 src/app/sections/4-speakers/graphics.jsx |  1 +
 src/app/sections/5-faq/graphics.jsx      |  1 +
 src/app/sections/6-sponsors/graphics.jsx |  1 +
 src/app/sections/7-footer/graphics.jsx   |  1 +
 8 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/sections/0-landing/graphics.jsx b/src/app/sections/0-landing/graphics.jsx
index 4e50426..f0eff22 100644
--- a/src/app/sections/0-landing/graphics.jsx
+++ b/src/app/sections/0-landing/graphics.jsx
@@ -38,6 +38,7 @@ const Graphics = () => {
           id="landing-bg"
           src={bg}
           alt="bg"
+          loading="eager"
           className="absolute z-0 w-screen"
         />
       </motion.div>
@@ -46,14 +47,15 @@ const Graphics = () => {
       {distant.map((item, index) => (
         <Parallax containerRef={container} speed={"sm"} key={index}>
           <motion.div
+            key={index}
             initial={{ opacity: 0, y: 100 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1.5, delay: 0.3, ease: "easeOut" }}
           >
             <Image
-              key={index}
               src={item}
               alt={"img"}
+              loading="eager"
               className="w-screen"
             />
           </motion.div>
@@ -70,6 +72,7 @@ const Graphics = () => {
           <Image
             src={cloud_r}
             alt={"img"}
+            loading="eager"
             className="w-screen"
           />
         </motion.div>
@@ -85,6 +88,7 @@ const Graphics = () => {
           <Image
             src={cloud_bl}
             alt={"img"}
+            loading="eager"
             className="w-screen"
           />
         </motion.div>
@@ -93,14 +97,15 @@ const Graphics = () => {
       {medium.map((item, index) => (
         <Parallax containerRef={container} speed={"md"} key={index}>
           <motion.div
+            key={index}
             initial={{ opacity: 0, y: 120 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 0.6, ease: "easeOut" }}
           >
             <Image
-              key={index}
               src={item}
               alt={"img"}
+              loading="eager"
               className="w-screen"
             />
           </motion.div>
@@ -183,12 +188,12 @@ const Graphics = () => {
       {close.map((item, index) => (
         <Parallax containerRef={container} speed={"lg"} key={index}>
           <motion.div
+            key={index}
             initial={{ opacity: 0, y: 150 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 1, ease: "easeOut" }}
           >
             <Image
-              key={index}
               src={item}
               alt={"img"}
               className="w-screen"
diff --git a/src/app/sections/1-about/graphics.jsx b/src/app/sections/1-about/graphics.jsx
index d94b7c2..960d3ff 100644
--- a/src/app/sections/1-about/graphics.jsx
+++ b/src/app/sections/1-about/graphics.jsx
@@ -36,6 +36,7 @@ const Graphics = () => {
           id="about-bg"
           src={bg}
           alt="bg"
+          loading="eager"
           className="absolute z-0 w-screen"
         />
       </motion.div>
diff --git a/src/app/sections/2-tracks/graphics.jsx b/src/app/sections/2-tracks/graphics.jsx
index e3b9824..5cff620 100644
--- a/src/app/sections/2-tracks/graphics.jsx
+++ b/src/app/sections/2-tracks/graphics.jsx
@@ -35,6 +35,7 @@ const Graphics = () => {
         id="tracks-bg"
         src={bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
 
diff --git a/src/app/sections/3-schedule/graphics.jsx b/src/app/sections/3-schedule/graphics.jsx
index d240016..d7e6440 100644
--- a/src/app/sections/3-schedule/graphics.jsx
+++ b/src/app/sections/3-schedule/graphics.jsx
@@ -34,6 +34,7 @@ const Graphics = () => {
         id="schedule-bg"
         src={bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
 
diff --git a/src/app/sections/4-speakers/graphics.jsx b/src/app/sections/4-speakers/graphics.jsx
index 7365a53..cf01d09 100644
--- a/src/app/sections/4-speakers/graphics.jsx
+++ b/src/app/sections/4-speakers/graphics.jsx
@@ -11,6 +11,7 @@ const Graphics = () => {
         id="speakers-bg"
         src={general_bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
     </div>
diff --git a/src/app/sections/5-faq/graphics.jsx b/src/app/sections/5-faq/graphics.jsx
index 6d08ea7..e475914 100644
--- a/src/app/sections/5-faq/graphics.jsx
+++ b/src/app/sections/5-faq/graphics.jsx
@@ -20,6 +20,7 @@ const Graphics = () => {
         id="speakers-bg"
         src={general_bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
     </div>
diff --git a/src/app/sections/6-sponsors/graphics.jsx b/src/app/sections/6-sponsors/graphics.jsx
index 7365a53..cf01d09 100644
--- a/src/app/sections/6-sponsors/graphics.jsx
+++ b/src/app/sections/6-sponsors/graphics.jsx
@@ -11,6 +11,7 @@ const Graphics = () => {
         id="speakers-bg"
         src={general_bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
     </div>
diff --git a/src/app/sections/7-footer/graphics.jsx b/src/app/sections/7-footer/graphics.jsx
index 388c7b6..a6d99a6 100644
--- a/src/app/sections/7-footer/graphics.jsx
+++ b/src/app/sections/7-footer/graphics.jsx
@@ -19,6 +19,7 @@ const Graphics = () => {
         id="footer-bg"
         src={bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />