scroll top issue fixed

src/components/isotope/CaseStudies.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { PortfolioData } from "@/utils/constant.utils";
@@ -21,20 +21,30 @@ const CaseStudies = () => {
   const [visibleCount, setVisibleCount] = useState(6);
   const observerRef = useRef(null);
 
-  const filteredItems =
+  // Memoize filtered items to prevent unnecessary re-computations
-    activeTab === "*"
+  const filteredItems = useMemo(() => {
+    return activeTab === "*"
       ? PortfolioData
       : PortfolioData.filter((item) => item.category === activeTab);
+  }, [activeTab]);
 
+  // Reset visible count when tab changes
   useEffect(() => {
     setVisibleCount(6);
   }, [activeTab]);
 
+  // Infinite Scroll Observer
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries[0].isIntersecting) {
-          setVisibleCount((prev) => prev + 6);
+          setVisibleCount((prev) => {
+            // Only increase if we haven't shown all items yet
+            if (prev < filteredItems.length) {
+              return prev + 6;
+            }
+            return prev;
+          });
         }
       },
       { threshold: 0.1 }
@@ -49,7 +59,7 @@ const CaseStudies = () => {
         observer.unobserve(observerRef.current);
       }
     };
-  }, [filteredItems]);
+  }, [filteredItems]); // Dependency ensures observer recreates only when list changes
 
   return (
     <>