Merge pull request #156 from keploy/fix-cpu

chore: remove components that are causing high cpu

app/(default)/page.tsx

@@ -1,5 +1,7 @@
+'use client'
 import Footer from "@/components/ui/footer";
-
+import React, { useState, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
 import Hero from "@/components/hero";
 import Features from "@/components/features";
 import ProblemBlocks from "@/components/problem-blocks";
@@ -10,11 +12,26 @@ import Installation from "@/components/installation";
 import { Testimonial } from "@/components/testimonial";
 import { testimonialData } from "@/components/utils/testimonial";
 import TwitterTestimonials from "@/components/TwitterTestimonials";
-export default function Home() {
+const Home: React.FC = () => {
+  const [loadFeatures, setLoadFeatures] = useState<boolean>(false);
+
+  const { ref: sentinelRef, inView: sentinelInView } = useInView({
+    triggerOnce: true, 
+    threshold: 0.1,
+  });
+
+  useEffect(() => {
+    if (sentinelInView) {
+      setLoadFeatures(true);
+    }
+  }, [sentinelInView]);
+
   return (
     <>
       <Hero />
-      <Features />
+      <div ref={sentinelRef} style={{ height: "1px", background: "transparent" }} />
+
+      {loadFeatures && <Features />}
 
       <Testimonial
         content={testimonialData[0].content}
@@ -23,7 +40,7 @@ export default function Home() {
         image={testimonialData[0].image}
       />
 
-      <Installation/>
+      <Installation />
 
       <Testimonial
         content={testimonialData[2].content}
@@ -45,4 +62,6 @@ export default function Home() {
       <Footer />
     </>
   );
-}
+};
+
+export default Home;

components/FeatureMoblieView.tsx

@@ -4,12 +4,11 @@ import React, { useState, useRef, useEffect } from "react";
 import { Transition } from "@headlessui/react";
 import Image from "next/image";
 import NativeIntegration from "@/public/images/replay-tc31305e1d2286fe485b27.gif";
-import testAndStubsGen from "@/public/images/TestGenHighlighted.json";
-import deDuplication from "@/public/images/CaptureAndReplayV2.json";
+import testAndStubsGen from "@/public/images/testAndStubsGen.webp";
 import Link from "next/link";
-import dynamic from "next/dynamic";
+import deDuplication from "@/public/images/deDuplication.webp"
 
-const LottiePlayer = dynamic(() => import("./LottiePlayer"), { ssr: false });
+// const LottiePlayer = dynamic(() => import("./LottiePlayer"));
 
 export default function FeaturesMobileView() {
   const [tab, setTab] = useState<number>(1);
@@ -214,7 +213,7 @@ export default function FeaturesMobileView() {
                     leaveTo="opacity-0 -translate-y-16"
                     beforeEnter={() => heightFix()}
                   >
-                    <LottiePlayer VideoPath={testAndStubsGen} />
+                    <Image src={testAndStubsGen} alt="tests and stub gen gif"/>
                   </Transition>
                   <Transition
                     show={tab === 2}
@@ -227,7 +226,7 @@ export default function FeaturesMobileView() {
                     leaveTo="opacity-0 -translate-y-16"
                     beforeEnter={() => heightFix()}
                   >
-                    <LottiePlayer VideoPath={deDuplication} />
+                    <Image src={deDuplication} alt="dedup image gif"/>
                   </Transition>
                   <Transition
                     show={tab === 3}

components/LottiePlayer.tsx

@@ -1,22 +1,20 @@
 import React from "react";
-import { Player, Controls } from "@lottiefiles/react-lottie-player";
+import LottieLight from 'react-lottie-player/dist/LottiePlayerLight';
+
+
 const LottiePlayer = ({VideoPath , className}:{VideoPath:any , className?:string}) => {
   return (  
     <div>
-       <Player
-        autoplay
-        loop
-        src={VideoPath}
+       <LottieLight
+        useSubframes={false}
+        speed={3}
+        play
+        animationData={VideoPath}
         className={className ? className : "w-full max-w-xs md:max-w-sm lg:max-w-md"} // Adjust width for different screen sizes
-        style={{ height: "60%" }} // Reduced height for responsiveness
-        keepLastFrame={true}
+        style={{ height: "50%" }} // Reduced height for responsiveness
       >
-        <Controls
-          visible={false}
-          buttons={["play", "repeat", "frame", "debug"]}
-        />
-      </Player>
-    </div>
+      </LottieLight>
+      </div>
   );
 };
 

components/features.tsx

@@ -1,52 +1,41 @@
 "use client";
 
-import React, {useRef} from "react";
-import testAndStubsGen from "@/public/images/TestGenHighlighted.json";
-import deDuplication from "@/public/images/CaptureAndReplayV2.json";
+import React, { useRef, useEffect, useState } from "react";
+import { useInView } from "react-intersection-observer";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Link from "next/link";
-import gsap from "gsap"; // <-- import GSAP
-import { useGSAP } from "@gsap/react"; // <-- import the hook
-import { ScrollTrigger } from "gsap/all";
-import _ScrollTrigger from "gsap/ScrollTrigger";
 import FeaturesMobileView from "./FeatureMoblieView";
-import dynamic from "next/dynamic";
-const LottiePlayer = dynamic(() => import("./LottiePlayer"), { ssr: false });
-gsap.registerPlugin(useGSAP);
+import Image from "next/image";
+import testAndStubsGen from "@/public/images/testAndStubsGen.webp";
+import deDuplication from "@/public/images/deDuplication.webp"
+
 gsap.registerPlugin(ScrollTrigger);
 
-const TestAndStubGenerationImage = () => {
+// const LottiePlayer = dynamic(() => import("./LottiePlayer"), { ssr: false });
+
+const TestAndStubGenerationImage = ({ isActive }: { isActive: boolean }) => {
   return (
-    <div className="inline-flex flex-col w-full imageToShow " id="img-1">
-      {/* <Image className="mx-auto rounded md:max-w-none" src={FeaturesBg} width={500} height="462" alt="Features bg" /> */}
-      <div className=" mb-2 h-[50%]">
-        <LottiePlayer VideoPath={testAndStubsGen} />
+    <div className="flex flex-col w-full imageToShow relative" id="img-1">
+      <div className="mb-2 h-[75%]">
+        {/* {isActive && <LottiePlayer VideoPath={testAndStubsGen} />} */}
+        {isActive && <Image src={testAndStubsGen} alt="tests and stub gen gif"/> }
       </div>
-
     </div>
   );
 };
 
-const TestDuplicationImage = () => {
+const TestDuplicationImage = ({ isActive }: { isActive: boolean }) => {
   return (
-    <div className="inline-flex flex-col w-full imageToShow " id="img-1">
-      {/* <Image className="mx-auto rounded md:max-w-none" src={FeaturesBg} width={500} height="462" alt="Features bg" /> */}
-      <div className=" mb-2 h-[50%]">
-        <LottiePlayer VideoPath={deDuplication} />
+    <div className="flex flex-col w-full imageToShow relative" id="img-2">
+      <div className="mb-2 h-[75%]">
+        {/* {isActive && <LottiePlayer VideoPath={deDuplication} />} */}
+        {isActive && <Image src={deDuplication} alt="dedup image gif"/>}
       </div>
-
     </div>
   );
 };
 
-
-
-
-  // const heightFix = () => {
-  //   if (tabs.current && tabs.current.parentElement)
-  //     tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`;
-  // };
-
-
 const TextSection = ({
   svg,
   heading,
@@ -84,15 +73,69 @@ const TextSection = ({
 };
 
 export default function Features() {
-  const container = useRef(null);
+  // const container = useRef<HTMLDivElement | null>(null);
+
+  const [activeImages, setActiveImages] = useState<boolean[]>([false, false]);
 
-useGSAP(
-  () => {
-    const details: any = gsap.utils.toArray(".detail");
+  // Use Intersection Observer to detect when the container is in view
+  const { ref: inViewRef, inView } = useInView({
+    triggerOnce: false,
+    threshold: 0.1,
+  });
 
-    const images: any = gsap.utils.toArray(".imageToShow");
+  useEffect(() => {
+    if (!inView) {
+      // Container is out of view, kill all ScrollTriggers and reset state
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+      setActiveImages([false, false]);
+      return;
+    }
 
-    gsap.set(images[1], { opacity: 0 });
+    // Container is in view, set up GSAP animations
+    const details = gsap.utils.toArray<HTMLElement>(".detail");
+    const images = gsap.utils.toArray<HTMLElement>(".imageToShow");
+
+    gsap.set(images, { opacity: 0, y: 50 });
+
+    const detailImageMapping = [
+      { detail: details[0], image: images[0] }, 
+      { detail: details[1], image: images[1] }, 
+    ];
+
+    detailImageMapping.forEach((mapping, index) => {
+      ScrollTrigger.create({
+        trigger: mapping.detail,
+        start: "top 75%",
+        end: "bottom 25%",
+        onEnter: () => {
+          gsap.to(mapping.image, {
+            opacity: 1,
+            y: 0,
+            duration: 0.8,
+            ease: "power2.out",
+          });
+          setActiveImages((prev) => {
+            const newState = [...prev];
+            newState[index] = true;
+            return newState;
+          });
+        },
+        onLeaveBack: () => {
+          gsap.to(mapping.image, {
+            opacity: 0,
+            y: 50, 
+            duration: 0.8,
+            ease: "power2.out",
+          });
+          setActiveImages((prev) => {
+            const newState = [...prev];
+            newState[index] = false;
+            return newState;
+          });
+        },
+        scrub: true,
+      });
+    });
 
     ScrollTrigger.create({
       trigger: ".content-container",
@@ -108,45 +151,50 @@ useGSAP(
       pin: ".heading-text",
     });
 
-    details.forEach((detail: any) => {
-      gsap.set(detail, { opacity: 1 }); 
+    if (detailImageMapping.length > 1 && images.length > 1) {
+      gsap.to(images[0], {
+        scrollTrigger: {
+          trigger: detailImageMapping[1].detail,
+          start: "center center",
+          end: "center center",
+          scrub: 1,
+        },
+        opacity: 0,
+      });
+      gsap.to(images[1], {
+        scrollTrigger: {
+          trigger: detailImageMapping[1].detail,
+          start: "center center",
+          end: "center center",
+          scrub: 1,
+        },
+        opacity: 1,
+      });
+    }
 
+    // Make each detail disappear as soon as it hits the top boundary
+    details.forEach((detail: HTMLElement) => {
+      gsap.set(detail, { opacity: 1 });
       ScrollTrigger.create({
         trigger: detail,
-        start: "top 20%", 
+        start: "top 20%", // When the detail hits the top 20% of the viewport
         end: "center center",
-        onEnter: () => gsap.set(detail, { opacity: 0 }),
-        onLeaveBack: () => gsap.set(detail, { opacity: 1 }),
-        scrub: 1, 
+        onEnter: () => gsap.to(detail, { opacity: 0, duration: 0.5, ease: "power2.out" }),
+        onLeaveBack: () => gsap.to(detail, { opacity: 1, duration: 0.5, ease: "power2.out" }),
+        scrub: 1,
       });
     });
 
-    gsap.to(images[0], {
-      scrollTrigger: {
-        trigger: details[1],
-        start: "center center",
-        end: "center center",
-        scrub: 1,
-      },
-      opacity: 0,
-    });
-    gsap.to(images[1], {
-      scrollTrigger: {
-        trigger: details[1],
-        start: "center center",
-        end: "center center",
-        scrub: 1,
-      },
-      opacity: 1,
-    });
-  },
-  { scope: container }
-);
+    // Cleanup function
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, [inView]);
 
   return (
     <>
       <FeaturesMobileView />
-      <section ref={container} className="relative hidden lg:block">
+      <section className="relative hidden lg:block">
         <div className="absolute left-0 right-0 max-w-3xl pt-2 mx-auto mt-16 text-center top-6 heading-text">
           <h1 className="mb-2 text-5xl font-bold text-secondary-300">
             Keploy for Developers
@@ -156,11 +204,8 @@ useGSAP(
           </p>
         </div>
         <div className="relative grid max-w-6xl grid-cols-2 gap-16 pt-[30vh] pb-[50vh]  mx-auto  content-container">
-          <div className="mt-20 space-y-[50vh]  ">
-            <div
-              className="flex items-center detail"
-              data-marker-content="img-1"
-            >
+          <div className="mt-20 space-y-[60vh]" ref={inViewRef}>
+            <div className="flex items-center detail" data-marker-content="img-1">
               <TextSection
                 svg={
                   <svg
@@ -177,7 +222,7 @@ useGSAP(
                 btnLink="https://keploy.io/docs/keploy-explained/introduction/"
               />
             </div>
-            <div className="flex items-center detail">
+            <div className="flex items-center detail" data-marker-content="img-2">
               <TextSection
                 svg={
                   <svg
@@ -218,9 +263,9 @@ useGSAP(
               />
             </div>
           </div>
-          <div className="flex items-center [&>*]:absolute relative  justify-center h-min [&>*]:top-0 right-content">
-            <TestAndStubGenerationImage />
-            <TestDuplicationImage />
+          <div className="flex flex-col items-center relative justify-center h-min right-content space-y-8 mt-[20vh]">
+            <TestAndStubGenerationImage isActive={activeImages[0]} />
+            <TestDuplicationImage isActive={activeImages[1]} />
           </div>
         </div>
       </section>