Fix Glitchy Animation on Academic Partners Slider During Initial Load #6528

src/sections/Home/Partners-home/index.js

@@ -1,5 +1,4 @@
-
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Container, Row } from "../../../reusecore/Layout";
 import SectionTitle from "../../../reusecore/SectionTitle";
 import PartnerItemWrapper from "./partnerSection.style";
@@ -9,7 +8,7 @@ import Slider from "react-slick";
 
 const settings = {
   initialSlide: 1,
-  lazyLoad: true,
+  lazyLoad: false, // disabled to avoid visual glitches
   arrows: false,
   dots: false,
   infinite: true,
@@ -28,6 +27,26 @@ const settings = {
 };
 
 const Projects = () => {
+  const [allImagesLoaded, setAllImagesLoaded] = useState(false);
+
+  useEffect(() => {
+    let loadedCount = 0;
+
+    const handleImageLoad = () => {
+      loadedCount += 1;
+      if (loadedCount === partners.length) {
+        setAllImagesLoaded(true);
+      }
+    };
+
+    partners.forEach((partner) => {
+      const img = new Image();
+      img.src = partner.imageLink;
+      img.onload = handleImageLoad;
+      img.onerror = handleImageLoad; // count failed as loaded
+    });
+  }, []);
+
   return (
     <PartnerItemWrapper>
       <Container>
@@ -41,15 +60,29 @@ 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>
+
+      {!allImagesLoaded ? (
+        <div className="loading-indicator">
+          <span className="loader" />
+        </div>
+      ) : (
+        <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}
+                  src={partner.imageLink}
+                  alt={partner.name}
+                  width={partner.imageWidth}
+                  height={partner.imageHeight}
+                />
+              </div>
+            </Link>
+          ))}
+        </Slider>
+      )}
     </PartnerItemWrapper>
   );
 };

src/sections/Home/Partners-home/partnerSection.style.js

@@ -19,6 +19,7 @@ const PartnerItemWrapper = styled.section`
         display: flex;
         justify-content: center;
         flex-wrap: nowrap;
+        overflow: hidden;
         @media(max-width: 1400px){
             flex-wrap: wrap;
         }
@@ -58,6 +59,9 @@ const PartnerItemWrapper = styled.section`
          }
 
         flex-shrink: 3;
+
+        min-width: 150px;
+        transition: transform 0.3s ease-in-out;
 
 
 
@@ -112,6 +116,29 @@ const PartnerItemWrapper = styled.section`
             padding: 2.5rem;
         }
      } */
+
+     .loading-indicator {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 120px;
+    }
+
+    .loader {
+        width: 32px;
+        height: 32px;
+        border: 4px solid rgba(0, 0, 0, 0.2);
+        border-top: 4px solid ${props => props.theme.green009A89ToGreen00B39F};
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
 `;
 
 export default PartnerItemWrapper;