Fix partner slider animation in home page

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;