portfolio loading updated

src/components/isotope/CaseStudies.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { PortfolioData } from "@/utils/constant.utils";
@@ -18,12 +18,39 @@ const tabs = [
 
 const CaseStudies = () => {
   const [activeTab, setActiveTab] = useState("*");
+  const [visibleCount, setVisibleCount] = useState(6);
+  const observerRef = useRef(null);
 
   const filteredItems =
     activeTab === "*"
       ? PortfolioData
       : PortfolioData.filter((item) => item.category === activeTab);
 
+  useEffect(() => {
+    setVisibleCount(6);
+  }, [activeTab]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          setVisibleCount((prev) => prev + 6);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (observerRef.current) {
+      observer.observe(observerRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observer.unobserve(observerRef.current);
+      }
+    };
+  }, [filteredItems]);
+
   return (
     <>
       {/* Title Section */}
@@ -82,7 +109,7 @@ const CaseStudies = () => {
 
       {/* Portfolio Grid */}
       <div className="row image_load">
-        {filteredItems.map((item) => (
+        {filteredItems.slice(0, visibleCount).map((item) => (
           <div
             key={item.id}
             className={`${item.colClass} grid-item ${item.category} ${item.itemClass || ""}`}
@@ -188,6 +215,12 @@ const CaseStudies = () => {
           </div>
         ))}
       </div>
+
+      {/* Sentinel Element for Infinite Scroll */}
+      <div
+        ref={observerRef}
+        style={{ height: "20px", marginBottom: "20px" }}
+      ></div>
     </>
   );
 };