From ff8861ae88b598a94cee1f38ba6eeeecf2e497af Mon Sep 17 00:00:00 2001
From: Amnyadav <amn.yadav707@gmail.com>
Date: Sat, 12 Oct 2024 00:46:27 +0530
Subject: [PATCH] optimized image loading time using lazy loading

---
 frontend/src/components/Pages/Admin.jsx          |  1 +
 frontend/src/components/Pages/Boardgame.jsx      |  1 +
 frontend/src/components/Pages/Event.jsx          | 16 +++++++++-------
 frontend/src/components/Pages/Login.jsx          |  2 +-
 .../Pages/MenuPages.jsx/Boba/ThirdPage.jsx       |  2 ++
 .../Pages/MenuPages.jsx/Coffee/FirstPage.jsx     |  5 +++--
 .../Pages/MenuPages.jsx/ThankPage/ThankPage.jsx  |  2 ++
 frontend/src/components/Pages/Notfound.jsx       |  1 +
 frontend/src/components/Pages/Register.jsx       |  2 ++
 frontend/src/components/Pages/ResetPassword.jsx  |  2 +-
 frontend/src/components/Pages/Signup.jsx         |  2 +-
 frontend/src/components/Pages/TodaysSpecial.jsx  |  6 +++---
 frontend/src/components/Shared/Navbar.jsx        |  1 +
 .../src/components/Shared/footer/Content.jsx     |  1 +
 frontend/src/components/ui/FeedbackForm.jsx      |  1 +
 frontend/src/components/ui/Landing.jsx           |  4 ++--
 frontend/src/index.css                           |  4 ++++
 17 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Pages/Admin.jsx b/frontend/src/components/Pages/Admin.jsx
index 180c8f60..bc588822 100644
--- a/frontend/src/components/Pages/Admin.jsx
+++ b/frontend/src/components/Pages/Admin.jsx
@@ -274,6 +274,7 @@ const Admin = () => {
                     <img
                       src={event.image}
                       alt={event.title}
+                      loading='lazy'
                       className="h-[400px] w-full"
                     />
                   </div>
diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index 96ca0fcf..001bb69a 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/frontend/src/components/Pages/Boardgame.jsx
@@ -245,6 +245,7 @@ export default function Boardgame() {
                   <img
                     src={board.src}
                     alt={board.title}
+                    loading="lazy"
                     width="500"
                     height="400"
                     className="object-cover w-full h-48 transition-all duration-300 ease-in-out group-hover:h-32"
diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx
index 1663f37a..fa133f31 100644
--- a/frontend/src/components/Pages/Event.jsx
+++ b/frontend/src/components/Pages/Event.jsx
@@ -124,14 +124,15 @@ export default function Event() {
               <img
                 src={band}
                 alt="band"
+                loading="lazy"
                 className="w-2/5 absolute left-1/2 top-[20%] z-10 translate-x-[-50%] mx-auto"
               />
               <h1 className="text-6xl md:text-9xl font-bold ml-4" ref={textRef}>
                 Upcoming Events and much more....
               </h1>
               <div className="flex w-full h-80 rounded-full items-center px-40  bg-yellow-100 justify-between shadow-md">
-                <img src={game} alt="game" className="w-28 h-28" />
-                <img src={spin} alt="game" className="w-28 h-28" />
+                <img src={game} alt="game" loading="lazy" className="w-28 h-28" />
+                <img src={spin} alt="game" loading="lazy" className="w-28 h-28" />
               </div>
             </div>
           </div>
@@ -189,19 +190,19 @@ export default function Event() {
                 <div className="splide__track w-full ">
                   <ul className="splide__list">
                     <li className="splide__slide ">
-                      <img src={img1} alt="Event 1" className="w-full h-full" />
+                      <img src={img1} alt="Event 1" loading="lazy" className="w-full h-full" />
                     </li>
                     <li className="splide__slide">
-                      <img src={img2} alt="Event 2" className="w-full h-full" />
+                      <img src={img2} alt="Event 2" loading="lazy" className="w-full h-full" />
                     </li>
                     <li className="splide__slide">
-                      <img src={img3} alt="Event 3" className="w-full h-full" />
+                      <img src={img3} alt="Event 3" loading="lazy" className="w-full h-full" />
                     </li>
                     <li className="splide__slide">
-                      <img src={img4} alt="Event 4" className="w-full h-full" />
+                      <img src={img4} alt="Event 4" loading="lazy" className="w-full h-full" />
                     </li>
                     <li className="splide__slide">
-                      <img src={img5} alt="Event 6" className="w-full h-full" />
+                      <img src={img5} alt="Event 6" loading="lazy" className="w-full h-full" />
                     </li>
                     {/* Add more images here */}
                   </ul>
@@ -223,6 +224,7 @@ export default function Event() {
                     <img
                       src={event.image}
                       alt={event.title}
+                      loading="lazy"
                       className="h-[400px] w-full"
                     />
                   </div>
diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
index ecd9139d..8c37eb48 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/frontend/src/components/Pages/Login.jsx
@@ -55,7 +55,7 @@ const Login = () => {
 
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
-      <img src={photo} alt="login" className=" w-3/4 absolute" />
+      <img src={photo} alt="login" loading="lazy" className=" w-3/4 absolute" />
       <form
         onSubmit={(e) => handleSubmit(e)}
         className="form z-10 p-16 bg-lightblue flex flex-col items-start justify-center gap-5 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"
diff --git a/frontend/src/components/Pages/MenuPages.jsx/Boba/ThirdPage.jsx b/frontend/src/components/Pages/MenuPages.jsx/Boba/ThirdPage.jsx
index 61699b22..b8974b04 100644
--- a/frontend/src/components/Pages/MenuPages.jsx/Boba/ThirdPage.jsx
+++ b/frontend/src/components/Pages/MenuPages.jsx/Boba/ThirdPage.jsx
@@ -148,11 +148,13 @@ const ThirdPage = () => {
                   src={bubbleTea}
                   className="md:h-40 md:w-50 h-20 w-20 object-contain"
                   alt="Bubble Tea"
+                  loading="lazy"
                 />
                 <img
                   src={bubbleTea2}
                   className="md:h-40 md:w-50 h-20 w-20 object-contain"
                   alt="Bubble Tea"
+                  loading="lazy"
                 />
               </div>
             </div>
diff --git a/frontend/src/components/Pages/MenuPages.jsx/Coffee/FirstPage.jsx b/frontend/src/components/Pages/MenuPages.jsx/Coffee/FirstPage.jsx
index df5dc187..0defc8ef 100644
--- a/frontend/src/components/Pages/MenuPages.jsx/Coffee/FirstPage.jsx
+++ b/frontend/src/components/Pages/MenuPages.jsx/Coffee/FirstPage.jsx
@@ -146,13 +146,14 @@ const FirstPage = () => {
               </div>
 
               <div className="flex justify-center -space-x-36">
-                <img src={coffee} className="h-50 w-50 " alt="Coffee" />
+                <img src={coffee} className="h-50 w-50 " alt="Coffee" loading="lazy"/>
                 <img
                   src={coffee}
                   className="h-50 w-50 transform scale-110"
                   alt="Coffee"
+                  loading="lazy"
                 />
-                <img src={coffee} className="h-50 w-50" alt="Coffee" />
+                <img src={coffee} className="h-50 w-50" alt="Coffee" loading="lazy"/>
               </div>
             </div>
           </div>
diff --git a/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx b/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx
index c00849a5..3cda0ba1 100644
--- a/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx
+++ b/frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx
@@ -10,6 +10,7 @@ const ThankPage = () => {
         <img
           src={logo}
           alt="Sip&Play Cafe Logo"
+          loading="lazy"
           className="md:hidden block absolute w-3/4 h-3/4 -mt-44 items-center object-contain opacity-[0.5]"
           style={{
             top: '50%',
@@ -22,6 +23,7 @@ const ThankPage = () => {
           <img
             src={logo}
             alt="Sip&Play Cafe Logo"
+            loading="lazy"
             className="absolute w-3/4 h-3/4 object-contain opacity-[0.1]"
             style={{
               top: '50%',
diff --git a/frontend/src/components/Pages/Notfound.jsx b/frontend/src/components/Pages/Notfound.jsx
index 10c6b1c7..52626186 100644
--- a/frontend/src/components/Pages/Notfound.jsx
+++ b/frontend/src/components/Pages/Notfound.jsx
@@ -13,6 +13,7 @@ const NotFound = () => {
             <img
                 src={Notfound} // Replace with your actual GIF path
                 alt="Not Found GIF"
+                loading="lazy"
                 className="w-full max-w-md"
             />
             <p className="mt-8 text-lg text-gray-700 text-center">
diff --git a/frontend/src/components/Pages/Register.jsx b/frontend/src/components/Pages/Register.jsx
index b01b506d..c55aff36 100644
--- a/frontend/src/components/Pages/Register.jsx
+++ b/frontend/src/components/Pages/Register.jsx
@@ -54,6 +54,7 @@ export default function Register() {
             <img
               src={pic}
               alt="Board Game Cafe"
+              loading="lazy"
               className="w-full h-auto  rounded-s-full"
             />
           </div>
@@ -165,6 +166,7 @@ export default function Register() {
                   <img
                     src={game.src}
                     alt={game.title}
+                    loading="lazy"
                     className="mb-4 w-64 h-64 object-cover"
                   />
                   <div className="font-medium">{game.title}</div>
diff --git a/frontend/src/components/Pages/ResetPassword.jsx b/frontend/src/components/Pages/ResetPassword.jsx
index e2b4ab8a..9174d075 100644
--- a/frontend/src/components/Pages/ResetPassword.jsx
+++ b/frontend/src/components/Pages/ResetPassword.jsx
@@ -73,7 +73,7 @@ const ResetPassword = () => {
 
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
-      <img src={photo} alt="login" className=" w-3/4 absolute" />
+      <img src={photo} alt="login" loading="lazy" className=" w-3/4 absolute" />
       <form
         onSubmit={(e) => handleSubmit(e)}
         className="form z-10 p-16 bg-lightblue flex flex-col items-start justify-center gap-5 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"
diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx
index 0d8e47b6..308d9acb 100644
--- a/frontend/src/components/Pages/Signup.jsx
+++ b/frontend/src/components/Pages/Signup.jsx
@@ -77,7 +77,7 @@ const Signup = () => {
 
   return (
     <div className="w-screen h-screen flex items-center justify-center pt-10">
-      <img src={photo} alt="login" className=" w-3/4 absolute" />
+      <img src={photo} alt="login" loading="lazy" className=" w-3/4 absolute" />
       <form className="form z-10 p-16 bg-lightblue flex flex-col items-start justify-center gap-5 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]">
         <div className="title text-[#323232] font-black text-7xl mb-6">
           Play Cafe,
diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx
index 5b911ffc..bb952aa6 100644
--- a/frontend/src/components/Pages/TodaysSpecial.jsx
+++ b/frontend/src/components/Pages/TodaysSpecial.jsx
@@ -61,7 +61,7 @@ const TodaysSpecial = () => {
           onMouseEnter={() => setHoveredItem('coffee')}
           onMouseLeave={() => setHoveredItem(null)}
         >
-          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} loading="lazy" />
 
           <h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
           <p className="text-gray-600">{todaysSpecial.coffee.description}</p>
@@ -81,7 +81,7 @@ const TodaysSpecial = () => {
           onMouseEnter={() => setHoveredItem('food')}
           onMouseLeave={() => setHoveredItem(null)}
         >
-          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} />
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} loading="lazy" />
 
           <h3 className="text-xl font-semibold">{todaysSpecial.food.name}</h3>
           <p className="text-gray-600">{todaysSpecial.food.description}</p>
@@ -101,7 +101,7 @@ const TodaysSpecial = () => {
           onMouseEnter={() => setHoveredItem('drink')}
           onMouseLeave={() => setHoveredItem(null)}
         >
-          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} />
+          <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} loading="lazy"/>
 
           <h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
           <p className="text-gray-600">{todaysSpecial.drink.description}</p>
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index 4993a7ae..e74f284b 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -82,6 +82,7 @@ const Navbar = () => {
                 className="w-14 h-14 bg-white rounded-full p-0"
                 alt="logo"
                 src={Logo}
+                loading="lazy"
               />
             </div>
           </Link>
diff --git a/frontend/src/components/Shared/footer/Content.jsx b/frontend/src/components/Shared/footer/Content.jsx
index 0812a3d7..b39070aa 100644
--- a/frontend/src/components/Shared/footer/Content.jsx
+++ b/frontend/src/components/Shared/footer/Content.jsx
@@ -31,6 +31,7 @@ const Section2 = () => {
             className="w-24 bg-transparent p-0 rounded-3xl h-24"
             alt="logo"
             src={Logo}
+            loading="lazy"
           />
         </div>
       )}
diff --git a/frontend/src/components/ui/FeedbackForm.jsx b/frontend/src/components/ui/FeedbackForm.jsx
index e4b080f2..0865750f 100644
--- a/frontend/src/components/ui/FeedbackForm.jsx
+++ b/frontend/src/components/ui/FeedbackForm.jsx
@@ -99,6 +99,7 @@ const FeedbackForm = () => {
               <img
                 src={chess}
                 alt="Chess"
+                loading="lazy"
                 className="md:p-10 p-5 object-contain bg-[#004D43] rounded-full shadow-2xl"
               />
             </div>
diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx
index 068c9e41..30f93f11 100644
--- a/frontend/src/components/ui/Landing.jsx
+++ b/frontend/src/components/ui/Landing.jsx
@@ -46,11 +46,11 @@ function Landing() {
           <div>
             <div className="flex justify-center pt-64 z-0">
               <div className="absolute flex justify-center md:w-2/4 md:left-2/4 rotate-12 -bottom-20 items-center">
-                <img src={heropic} alt="" className="w-2/4" />
+                <img src={heropic} alt="" loading="lazy" className="w-2/4" />
               </div>
 
               <div className="absolute flex justify-center md:w-2/4 md:left-2/4 -rotate-12 -bottom-16">
-                <img src={heropic} alt="" className="w-2/4" />
+                <img src={heropic} alt="" loading="lazy" className="w-2/4" />
               </div>
             </div>
           </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 07307322..60f8d899 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -36,3 +36,7 @@
   background-color: #004d43;
   border-radius: 10px;
 }
+
+body {
+  overflow-x: hidden;
+}
\ No newline at end of file