fix: hide scroll arrow at bottom issue #815

application/frontend/src/pages/Search/Search.tsx

@@ -6,13 +6,17 @@ import { Link, useHistory } from 'react-router-dom';
 
 import { SEARCH } from '../../const';
 import { useToast } from './hooks/use-toast';
+import useIsVisible from './hooks/use-is-visible';
 
 export const SearchPage = () => {
   const { toast } = useToast();
 
   const [isArrowVisible, setIsArrowVisible] = useState(true);
   // const [loading, setLoading] = useState(false);
 
+   const { ref: footerRef, isIntersecting: isFooterVisible } = useIsVisible();
+
+
   //Search Functionality
   const history = useHistory();
   const [search, setSearch] = useState({ term: '', error: '' });
@@ -30,24 +34,13 @@ export const SearchPage = () => {
       observer.observe(mobileMenu, {attributes: true, attributeFilter: ['class']})
     }
 
-    const handleScroll = () => {
-      const footer = document.getElementById('page-footer');
-      if (footer) {
-        const footerTop = footer.getBoundingClientRect().top;
-        const windowHeight = window.innerHeight;
-        if (footerTop < windowHeight) {
-          setIsArrowVisible(false);
-        } else {
-          setIsArrowVisible(true);
-        }
-      }
-    };
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-      observer.disconnect();
-    };
-  }, []);
+    if(isFooterVisible){
+      setIsArrowVisible(false);
+    }else{
+      setIsArrowVisible(true);
+    }
+
+  }, [isFooterVisible]);
 
   // The handleSignOut function is no longer needed.
 
@@ -474,7 +467,7 @@ export const SearchPage = () => {
           </div>
         </div>
 
-        <footer id="page-footer" className="footer">
+        <footer ref={footerRef} id="page-footer" className="footer">
           <div className="footer__container">
             <div className="footer__grid">
               <div className="footer__about">

application/frontend/src/pages/Search/hooks/use-is-visible.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect, useRef } from 'react';
+
+function useIsVisible() {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // Update state when intersection status changes
+        setIsIntersecting(entry.isIntersecting);
+      },
+      {
+        root: null, // observing relative to the document's viewport
+        rootMargin: '0px',
+        threshold: 0.1, // trigger when 10% of the element is visible
+      }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    // Cleanup function to unobserve the element when the component unmounts
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, []); // Empty dependency array ensures the observer is set up once
+
+  return { ref, isIntersecting };
+}
+
+export default useIsVisible;