chore: update left nav icons

src/routes/chat/ChannelChat/LoadMore.js

@@ -1,8 +1,9 @@
-// import { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import styled from "styled-components";
 import { Waveform } from "@uiball/loaders";
 
 const Styled = styled.div`
+  margin-top: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -10,35 +11,35 @@ const Styled = styled.div`
   padding: 30px 0;
   /* background-color: #eee; */
 `;
-export default function LoadMore() {
-  // const ref = useRef(undefined);
-  // useEffect(() => {
-  //   const observer = new IntersectionObserver(
-  //     (entries) => {
-  //       entries.forEach((entry) => {
-  //         const intersecting = entry.isIntersecting;
-  //         //   const currEle = entry.target;
-  //         if (intersecting && loadMore) {
-  //           // load more
-  //           console.log("inview");
-  //           loadMore();
-  //         }
-  //       });
-  //     },
-  //     { threshold: 0 }
-  //   );
-  //   const currEle = ref?.current;
-  //   if (currEle) {
-  //     observer.observe(ref.current);
-  //   }
-  //   return () => {
-  //     if (currEle) {
-  //       observer.unobserve(currEle);
-  //     }
-  //   };
-  // }, [ref]);
+export default function LoadMore({ pullDown = null }) {
+  const ref = useRef(undefined);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const intersecting = entry.isIntersecting;
+          //   const currEle = entry.target;
+          if (intersecting && pullDown) {
+            // load more
+            console.log("inview");
+            pullDown();
+          }
+        });
+      },
+      { threshold: 0 }
+    );
+    const currEle = ref?.current;
+    if (currEle) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (currEle) {
+        observer.unobserve(currEle);
+      }
+    };
+  }, [ref, pullDown]);
   return (
-    <Styled>
+    <Styled ref={ref}>
       <Waveform
         className="loading"
         size={24}