From 26327273bf17a2e5d76d42c984881b40c3de19d2 Mon Sep 17 00:00:00 2001
From: Tharanishwaran <tharanishwaran.ta@gmail.com>
Date: Wed, 2 Oct 2024 16:59:35 +0530
Subject: [PATCH 1/4] Fix partner slider animation in home page

Signed-off-by: Tharanishwaran <tharanishwaran.ta@gmail.com>
---
 src/sections/Home/Partners-home/index.js | 92 ++++++++++++++++--------
 1 file changed, 62 insertions(+), 30 deletions(-)

diff --git a/src/sections/Home/Partners-home/index.js b/src/sections/Home/Partners-home/index.js
index d4174c44ec6a..14603d8c9a86 100644
--- a/src/sections/Home/Partners-home/index.js
+++ b/src/sections/Home/Partners-home/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Container, Row } from "../../../reusecore/Layout";
 import SectionTitle from "../../../reusecore/SectionTitle";
 import PartnerItemWrapper from "./partnerSection.style";
@@ -8,27 +8,57 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
-const settings = {
-  initialSlide: 1,
-  lazyLoad: true,
-  arrows: false,
-  dots: false,
-  infinite: true,
-  speed: 500,
-  centerMode: true,
-  variableWidth: true,
-  autoplay: true,
-  autoplaySpeed: 1500,
-  className: "partner-slider",
-  responsive: [
-    {
-      breakpoint: 1400,
-      settings: "unslick"
-    }
-  ]
-};
+const PartnerImage = ({ partner }) => (
+  <div className={partner.innerDivStyle}>
+    <img
+      className="partner-image"
+      id={partner.name}
+      src={partner.imageLink}
+      alt={partner.name}
+      width={partner.imageWidth}
+      height={partner.imageHeight}
+    />
+  </div>
+);
 
 const Projects = () => {
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+
+  useEffect(() => {
+    const imagePromises = partners.map(partner => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = resolve;
+        img.onerror = reject;
+        img.src = partner.imageLink;
+      });
+    });
+
+    Promise.all(imagePromises)
+      .then(() => setImagesLoaded(true))
+      .catch(error => console.error("Error preloading images:", error));
+  }, []);
+
+  const settings = {
+    initialSlide: 1,
+    lazyLoad: false,
+    arrows: false,
+    dots: false,
+    infinite: true,
+    speed: 500,
+    centerMode: true,
+    variableWidth: true,
+    autoplay: true,
+    autoplaySpeed: 1500,
+    className: "partner-slider",
+    responsive: [
+      {
+        breakpoint: 1400,
+        settings: "unslick"
+      }
+    ]
+  };
+
   return (
     <PartnerItemWrapper>
       <Container>
@@ -42,17 +72,19 @@ const Projects = () => {
           </SectionTitle>
         </Row>
       </Container>
-      <Slider {...settings}>
-        {partners.map((partner, index) => (
-          <Link className="partner-card" to={partner.imageRoute} key={index}>
-            <div className={partner.innerDivStyle}>
-              <img className="partner-image" id={partner.name} loading="lazy" src={partner.imageLink} alt={partner.name} width={partner.imageWidth} height={partner.imageHeight} />
-            </div>
-          </Link>
-        ))}
-      </Slider>
+      {imagesLoaded ? (
+        <Slider {...settings}>
+          {partners.map((partner, index) => (
+            <Link className="partner-card" to={partner.imageRoute} key={index}>
+              <PartnerImage partner={partner} />
+            </Link>
+          ))}
+        </Slider>
+      ) : (
+        <div style={{ textAlign: 'center', padding: '20px' }}>Loading partners...</div>
+      )}
     </PartnerItemWrapper>
   );
 };
 
-export default Projects;
+export default Projects;
\ No newline at end of file

From 8aa019246ba649f550009250169bdfc535f72222 Mon Sep 17 00:00:00 2001
From: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
Date: Wed, 9 Oct 2024 20:10:13 +0530
Subject: [PATCH 2/4] fix checks failing

Signed-off-by: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
---
 src/sections/Home/Partners-home/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sections/Home/Partners-home/index.js b/src/sections/Home/Partners-home/index.js
index d4f2efc9b0f3..70ac4fac3b7e 100644
--- a/src/sections/Home/Partners-home/index.js
+++ b/src/sections/Home/Partners-home/index.js
@@ -81,10 +81,10 @@ const Projects = () => {
           ))}
         </Slider>
       ) : (
-        <div style={{ textAlign: 'center', padding: '20px' }}>Loading partners...</div>
+        <div style={{ textAlign: "center", padding: "20px" }}>Loading partners...</div>
       )}
     </PartnerItemWrapper>
   );
 };
 
-export default Projects;
\ No newline at end of file
+export default Projects;

From d6a0e6ab8902022d3b22d0885cbe4670d4e1bf51 Mon Sep 17 00:00:00 2001
From: Tharanishwaran <tharanishwaran.ta@gmail.com>
Date: Tue, 22 Oct 2024 20:57:41 +0530
Subject: [PATCH 3/4] updated-Fix-partner-slider

Signed-off-by: Tharanishwaran <tharanishwaran.ta@gmail.com>
---
 src/sections/Home/Partners-home/index.js | 69 ++++++++++++++----------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/sections/Home/Partners-home/index.js b/src/sections/Home/Partners-home/index.js
index 70ac4fac3b7e..f1902001e916 100644
--- a/src/sections/Home/Partners-home/index.js
+++ b/src/sections/Home/Partners-home/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { memo, Suspense, useState, useEffect } from "react";
 import { Container, Row } from "../../../reusecore/Layout";
 import SectionTitle from "../../../reusecore/SectionTitle";
 import PartnerItemWrapper from "./partnerSection.style";
@@ -8,8 +8,8 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
-const PartnerImage = ({ partner }) => (
-  <div className={partner.innerDivStyle}>
+const PartnerImage = memo(({ partner }) => (
+  <div className="partner__block__inner">
     <img
       className="partner-image"
       id={partner.name}
@@ -17,26 +17,42 @@ const PartnerImage = ({ partner }) => (
       alt={partner.name}
       width={partner.imageWidth}
       height={partner.imageHeight}
+      loading="eager"
     />
   </div>
+));
+
+const PartnerSlider = memo(({ settings, isVisible }) => (
+  <div style={{
+    opacity: isVisible ? 1 : 0,
+    transition: "opacity 0.3s ease-in-out"
+  }}>
+    <Slider {...settings}>
+      {partners.map((partner, index) => (
+        <Link
+          to={partner.imageRoute}
+          className="partner-card"
+          key={partner.name || index}
+        >
+          <PartnerImage partner={partner} />
+        </Link>
+      ))}
+    </Slider>
+  </div>
+));
+
+const SliderFallback = () => (
+  <div style={{ height: "110px", visibility: "hidden" }} />
 );
 
 const Projects = () => {
-  const [imagesLoaded, setImagesLoaded] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
-    const imagePromises = partners.map(partner => {
-      return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = resolve;
-        img.onerror = reject;
-        img.src = partner.imageLink;
-      });
-    });
-
-    Promise.all(imagePromises)
-      .then(() => setImagesLoaded(true))
-      .catch(error => console.error("Error preloading images:", error));
+    const timer = setTimeout(() => {
+      setIsLoaded(true);
+    }, 300);
+    return () => clearTimeout(timer);
   }, []);
 
   const settings = {
@@ -48,7 +64,7 @@ const Projects = () => {
     speed: 500,
     centerMode: true,
     variableWidth: true,
-    autoplay: true,
+    autoplay: isLoaded,
     autoplaySpeed: 1500,
     className: "partner-slider",
     responsive: [
@@ -72,19 +88,14 @@ const Projects = () => {
           </SectionTitle>
         </Row>
       </Container>
-      {imagesLoaded ? (
-        <Slider {...settings}>
-          {partners.map((partner, index) => (
-            <Link className="partner-card" to={partner.imageRoute} key={index}>
-              <PartnerImage partner={partner} />
-            </Link>
-          ))}
-        </Slider>
-      ) : (
-        <div style={{ textAlign: "center", padding: "20px" }}>Loading partners...</div>
-      )}
+      <Suspense fallback={<SliderFallback />}>
+        <PartnerSlider
+          settings={settings}
+          isVisible={isLoaded}
+        />
+      </Suspense>
     </PartnerItemWrapper>
   );
 };
 
-export default Projects;
+export default Projects;
\ No newline at end of file

From fafaa6de9a8cd36b7346388eeddb71b37cac50c5 Mon Sep 17 00:00:00 2001
From: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
Date: Wed, 23 Oct 2024 01:19:40 +0530
Subject: [PATCH 4/4] Update index.js

Signed-off-by: Tharanishwaran <133676934+Tharanishwaran@users.noreply.github.com>
---
 src/sections/Home/Partners-home/index.js | 97 +++++++++++++++---------
 1 file changed, 60 insertions(+), 37 deletions(-)

diff --git a/src/sections/Home/Partners-home/index.js b/src/sections/Home/Partners-home/index.js
index f1902001e916..1fd8eb263743 100644
--- a/src/sections/Home/Partners-home/index.js
+++ b/src/sections/Home/Partners-home/index.js
@@ -1,4 +1,4 @@
-import React, { memo, Suspense, useState, useEffect } from "react";
+import React, { Suspense, useState, useEffect } from "react";
 import { Container, Row } from "../../../reusecore/Layout";
 import SectionTitle from "../../../reusecore/SectionTitle";
 import PartnerItemWrapper from "./partnerSection.style";
@@ -8,8 +8,8 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
-const PartnerImage = memo(({ partner }) => (
-  <div className="partner__block__inner">
+const PartnerImage = ({ partner }) => (
+  <div className={partner.innerDivStyle}>
     <img
       className="partner-image"
       id={partner.name}
@@ -17,42 +17,64 @@ const PartnerImage = memo(({ partner }) => (
       alt={partner.name}
       width={partner.imageWidth}
       height={partner.imageHeight}
-      loading="eager"
+      loading="lazy"
+      onLoad={(e) => {
+        e.target.classList.add("loaded");
+      }}
     />
   </div>
-));
+);
 
-const PartnerSlider = memo(({ settings, isVisible }) => (
-  <div style={{
-    opacity: isVisible ? 1 : 0,
-    transition: "opacity 0.3s ease-in-out"
-  }}>
-    <Slider {...settings}>
-      {partners.map((partner, index) => (
-        <Link
-          to={partner.imageRoute}
-          className="partner-card"
-          key={partner.name || index}
-        >
-          <PartnerImage partner={partner} />
-        </Link>
-      ))}
-    </Slider>
-  </div>
-));
+const SliderContent = ({ settings }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div style={{
+      opacity: isVisible ? 1 : 0,
+      visibility: isVisible ? 'visible' : 'hidden',
+      transition: 'opacity 0.3s ease-in-out',
+      position: 'relative',
+      height: isVisible ? 'auto' : '110px'
+    }}>
+      <Slider {...settings}>
+        {partners.map((partner, index) => (
+          <Link 
+            className="partner-card" 
+            to={partner.imageRoute} 
+            key={index}
+            style={{ 
+              display: 'inline-block',
+              verticalAlign: 'middle'
+            }}
+          >
+            <PartnerImage partner={partner} />
+          </Link>
+        ))}
+      </Slider>
+    </div>
+  );
+};
 
 const SliderFallback = () => (
-  <div style={{ height: "110px", visibility: "hidden" }} />
+  <div style={{ 
+    height: "110px", 
+    visibility: "hidden",
+    position: "relative"
+  }} />
 );
 
 const Projects = () => {
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsLoaded(true);
-    }, 300);
-    return () => clearTimeout(timer);
+    setIsClient(true);
   }, []);
 
   const settings = {
@@ -64,7 +86,7 @@ const Projects = () => {
     speed: 500,
     centerMode: true,
     variableWidth: true,
-    autoplay: isLoaded,
+    autoplay: isClient,
     autoplaySpeed: 1500,
     className: "partner-slider",
     responsive: [
@@ -88,14 +110,15 @@ const Projects = () => {
           </SectionTitle>
         </Row>
       </Container>
-      <Suspense fallback={<SliderFallback />}>
-        <PartnerSlider
-          settings={settings}
-          isVisible={isLoaded}
-        />
-      </Suspense>
+      <div style={{ position: 'relative', overflow: 'hidden' }}>
+        {isClient && (
+          <Suspense fallback={<SliderFallback />}>
+            <SliderContent settings={settings} />
+          </Suspense>
+        )}
+      </div>
     </PartnerItemWrapper>
   );
 };
 
-export default Projects;
\ No newline at end of file
+export default Projects;