From 83f326055fd90bf9550b1c43d4b714b153b1d1c1 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 21 Nov 2024 07:53:06 +0100
Subject: [PATCH] fix: prevent render loop

---
 .../components/InfiniteScrollGuilds.tsx       | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/components/InfiniteScrollGuilds.tsx
index 37997fe88c..6cf4e5d709 100644
--- a/src/app/explorer/components/InfiniteScrollGuilds.tsx
+++ b/src/app/explorer/components/InfiniteScrollGuilds.tsx
@@ -42,14 +42,20 @@ export const InfiniteScrollGuilds = () => {
   });
 
   useEffect(() => {
-    if (isFetchingNextPage) return;
+    if (!isFetchingNextPage) {
+      resetIsIntersected();
+    }
+  }, [resetIsIntersected, isFetchingNextPage]);
+
+  useEffect(() => {
+    if (isFetchingNextPage || isLoading) return;
     if (isIntersected && hasNextPage) {
       fetchNextPage();
     }
-    resetIsIntersected();
+    console.log("what", { isLoading, isFetchingNextPage });
   }, [isIntersected, hasNextPage, isFetchingNextPage, fetchNextPage]);
 
-  const guilds = data?.pages.flatMap((page) => page.items);
+  const guilds = data?.pages.flatMap((page) => page.items) || [];
 
   return (
     <section className="grid gap-2">
@@ -60,15 +66,18 @@ export const InfiniteScrollGuilds = () => {
                 <Skeleton className="size-full h-[114px]" />
               </Card>
             ))
-          : guilds?.map((guild) => <GuildCard key={guild.id} guild={guild} />)}
+          : guilds.map((guild) => <GuildCard key={guild.id} guild={guild} />)}
       </div>
-
       <div
-        ref={(element: HTMLDivElement | null) => {
+        ref={useCallback((element: HTMLDivElement | null) => {
           setIntersection(element);
-        }}
+        }, [])}
         aria-hidden
       />
+      {guilds.length === 0 &&
+        !isLoading &&
+        search &&
+        `No results for "${search}"`}
       <Button
         className="mt-8"
         onClick={() => fetchNextPage()}