Handle some edge cases

Author: fulopkovacs

src/components/TodoBoards.tsx

@@ -342,36 +342,54 @@ export function TodoBoards({ projectId }: { projectId: string }) {
     [projectId],
   );
 
-  // TODO: not sure if this is necessary
-  const [projectIds, setProjectIds] = useState<string[]>([]);
+  // Track projects that have completed loading (not just started)
+  const loadedProjectsRef = useRef<Set<string>>(new Set());
+  const unsubscribeRef = useRef<(() => void) | undefined>(undefined);
 
   const [showTodoItemsLoading, setShowTodoItemsLoading] =
     useState<boolean>(false);
 
   useEffect(() => {
-    let unsubscribe: (() => void) | undefined;
+    // Clean up previous subscription synchronously before creating a new one
+    if (unsubscribeRef.current) {
+      unsubscribeRef.current();
+      unsubscribeRef.current = undefined;
+    }
+
+    // If project already loaded, no need to show loading or subscribe
+    if (loadedProjectsRef.current.has(projectId)) {
+      setShowTodoItemsLoading(false);
+      return;
+    }
+
+    // If we have items or not loading, mark as loaded
+    if (allTodoItems.length > 0 || !todoItemsCollection.isLoadingSubset) {
+      loadedProjectsRef.current.add(projectId);
+      setShowTodoItemsLoading(false);
+      return;
+    }
 
-    if (
-      allTodoItems.length === 0 &&
-      todoItemsCollection.isLoadingSubset &&
-      !projectIds.includes(projectId)
-    ) {
-      setShowTodoItemsLoading(true);
-      setProjectIds((prev) => [...prev, projectId]);
+    // Items are empty and still loading - show skeleton and subscribe
+    setShowTodoItemsLoading(true);
 
-      unsubscribe = todoItemsCollection.on("loadingSubset:change", (event) => {
+    const currentProjectId = projectId;
+    unsubscribeRef.current = todoItemsCollection.on(
+      "loadingSubset:change",
+      (event) => {
         if (event.loadingSubsetTransition === "end") {
+          loadedProjectsRef.current.add(currentProjectId);
           setShowTodoItemsLoading(false);
         }
-      });
-    } else {
-      setShowTodoItemsLoading(false);
-    }
+      },
+    );
 
     return () => {
-      unsubscribe?.();
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+        unsubscribeRef.current = undefined;
+      }
     };
-  }, [projectId, projectIds, allTodoItems.length]);
+  }, [projectId, allTodoItems.length]);
 
   // Get active todo item from already-loaded collection data
   // instead of making a separate query