From e2c91e92399ffdbb85fba52f5937f14f54209e9b Mon Sep 17 00:00:00 2001
From: Bram Adams <3282661+bramses@users.noreply.github.com>
Date: Tue, 27 Aug 2024 17:06:04 -0400
Subject: [PATCH] chore: Optimize SearchBox sticky behavior for better
 performance

This commit optimizes the sticky behavior of the SearchBox component by adding a condition to only attach the scroll event listener when the window width is greater than 768 pixels. This improvement reduces unnecessary event handling and improves performance.

Note: This message includes additional information for clarity. Please remove it before using the commit message.
---
 src/components/SearchBox.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx
index bf84662..af21ae6 100644
--- a/src/components/SearchBox.tsx
+++ b/src/components/SearchBox.tsx
@@ -23,17 +23,20 @@ const SearchBox = () => {
   const [isSticky, setIsSticky] = useState(false);
 
   useEffect(() => {
-    const handleScroll = () => {
-      if (textAreaRef.current) {
-        const offsetTop = textAreaRef.current.getBoundingClientRect().top;
-        setIsSticky(offsetTop < 9);
-      }
-    };
+    if (window.innerWidth > 768) {
+      const handleScroll = () => {
+        if (textAreaRef.current) {
+          const offsetTop = textAreaRef.current.getBoundingClientRect().top;
+          setIsSticky(offsetTop < 9);
+        }
+      };
 
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
+      window.addEventListener('scroll', handleScroll);
+      return () => {
+        window.removeEventListener('scroll', handleScroll);
+      };
+    }
+    return undefined;
   }, []);
 
   const fetchByID = async (id: string) => {