From 23dbdec432b4ba86e9ec7c2f49e70013073178ad Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Wed, 23 Jul 2025 09:38:41 +0200
Subject: [PATCH] refactor: update image rendering logic in MainPageLayout to
 load images conditionally based on opacity for improved performance

---
 src/components/MainPageLayout.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js
index a346a2f..beb45e3 100644
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -612,21 +612,22 @@ const MainPageLayout = () => {
                         justifyContent: "center",
                       }}
                     >
-                      <img
-                        src={box.image}
-                        alt={box.title}
-                        fetchPriority="high"
-                        loading="eager"
-                        style={{
-                          maxWidth: "100%",
-                          maxHeight: "100%",
-                          objectFit: "contain",
-                          position: "absolute",
-                          top: "50%",
-                          left: "50%",
-                          transform: "translate(-50%, -50%)",
-                        }}
-                      />
+                      {/* Image loaded only when needed */}
+                      {getOpacity(pageType) === 1 && (
+                        <img
+                          src={box.image}
+                          alt={box.title}
+                          style={{
+                            maxWidth: "100%",
+                            maxHeight: "100%",
+                            objectFit: "contain",
+                            position: "absolute",
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
+                          }}
+                        />
+                      )}
                       <Box
                         sx={{
                           position: "absolute",