diff --git a/components/Common/Search/States/WithSearchBox.tsx b/components/Common/Search/States/WithSearchBox.tsx
index 7d9defa88bf07..a0154873bfcee 100644
--- a/components/Common/Search/States/WithSearchBox.tsx
+++ b/components/Common/Search/States/WithSearchBox.tsx
@@ -154,7 +154,7 @@ export const WithSearchBox: FC<SearchBoxProps> = ({ onClose }) => {
           <div className={styles.fulltextResultsContainer}>
             {searchError ? <WithError /> : null}
 
-            {(searchTerm ? (
+            {searchTerm ? (
               searchResults?.count ? (
                 searchResults?.hits.map(hit => (
                   <WithSearchResult
@@ -168,18 +168,15 @@ export const WithSearchBox: FC<SearchBoxProps> = ({ onClose }) => {
               )
             ) : (
               <WithEmptyState />
-            )) ?? null}
+            )}
 
-            {searchResults?.count
-              ? searchResults?.count > 8 &&
-                searchTerm && (
-                  <WithAllResults
-                    searchResults={searchResults}
-                    searchTerm={searchTerm}
-                    selectedFacetName={selectedFacetName}
-                  />
-                )
-              : null}
+            {searchResults?.count && searchResults?.count > 8 && searchTerm ? (
+              <WithAllResults
+                searchResults={searchResults}
+                searchTerm={searchTerm}
+                selectedFacetName={selectedFacetName}
+              />
+            ) : null}
           </div>
           <WithPoweredBy />
         </div>
diff --git a/hooks/react-client/useBottomScrollListener.ts b/hooks/react-client/useBottomScrollListener.ts
index 4b1bab73e4ce0..a380a0e495303 100644
--- a/hooks/react-client/useBottomScrollListener.ts
+++ b/hooks/react-client/useBottomScrollListener.ts
@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react';
 
+import { debounce } from '@/util/debounce';
+
 type CallbackFunction = () => void;
 
 const useBottomScrollListener = (
@@ -7,7 +9,8 @@ const useBottomScrollListener = (
   debounceTime = 300
 ) => {
   const [bottomReached, setBottomReached] = useState(false);
-  let timeoutId: NodeJS.Timeout | null = null;
+
+  const debouncedCallback = debounce(callback, debounceTime);
 
   const handleScroll = () => {
     const scrollTop = document.documentElement.scrollTop;
@@ -18,26 +21,15 @@ const useBottomScrollListener = (
 
     if (bottomOfWindow) {
       setBottomReached(true);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      timeoutId = setTimeout(() => {
-        callback();
-      }, debounceTime);
+      debouncedCallback();
     } else {
       setBottomReached(false);
     }
   };
 
   useEffect(() => {
-    // Add the event listener with the passive option set to true
     window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
+    return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
   return bottomReached;
diff --git a/util/debounce.ts b/util/debounce.ts
new file mode 100644
index 0000000000000..73472b35e07e4
--- /dev/null
+++ b/util/debounce.ts
@@ -0,0 +1,16 @@
+type DebounceFunction<T = unknown> = (...args: Array<T>) => void;
+
+export const debounce = <T extends DebounceFunction>(
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) => {
+  let timeoutId: NodeJS.Timeout;
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};