From 93cee683907c0bff53ecdba39332cceefb3634a7 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Tue, 16 Dec 2025 10:28:52 +0530
Subject: [PATCH] portfolio loading updated

---
 src/components/isotope/CaseStudies.js | 39 ++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/isotope/CaseStudies.js b/src/components/isotope/CaseStudies.js
index fd2319b..6ea7dfe 100644
--- a/src/components/isotope/CaseStudies.js
+++ b/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";
@@ -11,19 +11,46 @@ const tabs = [
   { label: "Graphic Design", value: "graphic" },
   { label: "Google Meta Ads", value: "meta" },
   { label: "Shopify Store", value: "shopify" },
-    { label: "WordPress", value: "wordpress" },
+  { label: "WordPress", value: "wordpress" },
   { label: "Logo Branding", value: "logo" },
   { label: "Video Editing", value: "video" },
 ];
 
 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>
     </>
   );
 };