From a47cbef0487222fa159f7da9fd1352d816858dbc Mon Sep 17 00:00:00 2001
From: swastik <swastikpatel29@gmail.com>
Date: Thu, 28 Mar 2024 00:29:26 +0530
Subject: [PATCH] lazyLoading for profile page.

---
 app/profilePage/page.tsx | 42 ++++++++++++++++++++++++++++++++++++----
 components/Navbar.tsx    |  6 +++++-
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/app/profilePage/page.tsx b/app/profilePage/page.tsx
index 3ceb943..cc5ab20 100644
--- a/app/profilePage/page.tsx
+++ b/app/profilePage/page.tsx
@@ -2,7 +2,7 @@
 
 import ProfileCard from "@/components/profilePage/ProfileCard";
 import Image from "next/image";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState , useRef } from "react";
 import { useRouter } from "next/navigation";
 
 
@@ -64,6 +64,9 @@ const ProfilePage = (props: Props) => {
   const router = useRouter();
   const [user, loading] = useAuthState(auth);
 
+  //for automating loadmore lazy load button ...
+  const loadMoreButtonRef = useRef<HTMLDivElement>(null);
+
   //followF
   const [followers, setFollowers] = useState<any>([]);
   const [following, setFollowing] = useState<any>([]);
@@ -410,6 +413,31 @@ useEffect(() => {
       setLoadMore((prev)=>!prev)
     };
 
+
+    //useEffect for automting lazyload functionality
+  useEffect(() => {
+    if(morePosts){
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          handleLoadMore();
+        }
+      },
+      { threshold: 1 } // 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.
+    );
+  
+    if (loadMoreButtonRef.current) {
+      observer.observe(loadMoreButtonRef.current);
+    }
+  
+    return () => {
+      if (loadMoreButtonRef.current) {
+        observer.unobserve(loadMoreButtonRef.current);
+      }
+    };
+  }
+  }, [loadMoreButtonRef, handleLoadMore ]);
+
     const handleSortChange = ()=>{
       setStart(true);
       setAnonymousStart(true);
@@ -660,20 +688,26 @@ useEffect(() => {
           <div className="mt-2 mb-5">
             {isAnonymous ? (
               anonymousMorePosts ? (
-                <Button onClick={handleLoadMore}>LoadMore...</Button>
+                <div ref={loadMoreButtonRef}>
+                  <button onClick={handleLoadMore}></button>
+                </div>
               ) : (
                 <div>No More Posts...</div>
               )
             ):(
               isAnswers?(
                 answerMorePosts ? (
-                  <Button onClick={handleLoadMore}>LoadMore...</Button>
+                  <div ref={loadMoreButtonRef}>
+                  <button onClick={handleLoadMore}></button>
+                  </div>
                 ) : (
                   <div>No More Posts...</div>
                 )
               ):
                 morePosts ? (
-              <Button onClick={handleLoadMore}>LoadMore</Button>
+                  <div ref={loadMoreButtonRef}>
+                  <button onClick={handleLoadMore}></button>
+                </div>
             ) : (
               <div>No More Posts...</div>
             )
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 083b848..a39a6c3 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -123,6 +123,7 @@ const Navbar = ({}: Props) => {
   const [notifications , setNotifications] = useState<any[]>([]);
   const [limitCount, setLimitCount] = useState(6); // Number of notifications to fetch at a time
   const [lastVisible, setLastVisible] = useState<any>(null);
+  const [showLoadMoreButton , setShowLoadMoreButton] = useState(true);
 
   //for algolia search
   const dispatch = useDispatch();
@@ -365,6 +366,9 @@ const Navbar = ({}: Props) => {
   }, [user, limitCount]);
 
   const loadMoreNotifications = () => {
+
+    setShowLoadMoreButton(false);
+
     if (lastVisible) {
       const notificationsRef = collection(db, "notifications");
       const nextQ1 = query(
@@ -526,7 +530,7 @@ const clearNotifications = async () => {
                 ))}
               </DropdownMenuGroup>
               <DropdownMenuSeparator />
-              {notifications.length>0&&
+              {notifications.length>0&& showLoadMoreButton &&
               <div className="cursor-pointer w-full flex justify-center text-sm" onClick={loadMoreNotifications}>Load More</div>
               }
             </DropdownMenuContent>