From a37650d251fc8e7f77f833c1df99be55c397873a Mon Sep 17 00:00:00 2001
From: thomasgross <thomasgrossrasmussen@gmail.com>
Date: Fri, 20 Dec 2024 10:50:32 +0100
Subject: [PATCH] feat: make the loadmore ref trigger 500px before the end of
 the list

---
 components/pages/searchPageLayout/SearchPageLayout.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/pages/searchPageLayout/SearchPageLayout.tsx b/components/pages/searchPageLayout/SearchPageLayout.tsx
index 86922bc..28dd01a 100644
--- a/components/pages/searchPageLayout/SearchPageLayout.tsx
+++ b/components/pages/searchPageLayout/SearchPageLayout.tsx
@@ -15,7 +15,7 @@ import useSearchMachineActor from "@/lib/machines/search/useSearchMachineActor"
 
 const SearchPageLayout = () => {
   const loadMoreRef = useRef(null)
-  const isInView = useInView(loadMoreRef)
+  const loadMoreRefIsInView = useInView(loadMoreRef)
   const actor = useSearchMachineActor()
   const {
     data,
@@ -27,13 +27,13 @@ const SearchPageLayout = () => {
   } = useSearchDataAndLoadingStates()
 
   useEffect(() => {
-    if (isInView) {
+    if (loadMoreRefIsInView) {
       actor.send({ type: "LOAD_MORE" })
     }
     // We choose to ignore the eslint warning below
     // because we do not want to add the handleMore callback which changes on every render.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isInView])
+  }, [loadMoreRefIsInView])
 
   useEffect(() => {
     actor.send({ type: "RESET_BOOTSTRAP_STATE" })
@@ -100,7 +100,7 @@ const SearchPageLayout = () => {
           )}
         </>
       )}
-      <div ref={loadMoreRef} className="h-0 opacity-0"></div>
+      <div ref={loadMoreRef} className="h-0 -translate-y-[500px] opacity-0"></div>
     </div>
   )
 }