add max fetches

Author: zaknesler

ui/src/hooks/queries/use-infinite-entries.ts

@@ -9,6 +9,11 @@ import type { Entry } from '~/types/bindings';
 import { findEntryItem } from '~/utils/entries';
 import { useQueryState } from '../../contexts/query-state-context';
 
+/**
+ * How many times are we willing to fetch more pages in order to populate the entry list up to the currently-viewed entry?
+ */
+const MAX_FETCHES = 25;
+
 export const useInfiniteEntries = () => {
   const state = useQueryState();
   const viewport = useViewport();
@@ -18,10 +23,10 @@ export const useInfiniteEntries = () => {
     queryFn: fetchParams =>
       getEntries({
         feed: state.params.feed_uuid,
-        view: state.getView(),
-        sort: state.getSort(),
         folder: state.params.folder_slug,
         cursor: fetchParams.pageParam as undefined | string,
+        view: state.getView(),
+        sort: state.getSort(),
       }),
     getNextPageParam: last => last.next_cursor,
     initialPageParam: undefined,
@@ -31,37 +36,39 @@ export const useInfiniteEntries = () => {
 
   const allEntries = () => query.data?.pages.flatMap(page => page.data) || [];
 
-  const fetchMore = leading(
-    debounce,
-    () => {
-      // Only fetch more if we have more to fetch and we're not already fetching
-      if (!query.hasNextPage || query.isFetchingNextPage) return;
+  const canFetchMore = () => query.hasNextPage && !query.isFetchingNextPage;
 
-      query.fetchNextPage();
-    },
-    100,
-  );
+  // Only fetch more if we have more to fetch and we're not already fetching
+  const fetchMore = leading(debounce, () => canFetchMore() && query.fetchNextPage(), 100);
+
+  const getNextCursor = () => query.data?.pages[query.data?.pages.length - 1].next_cursor;
 
   const [init, setInit] = createSignal(false);
+  const [fetches, setFetches] = createSignal(0);
+  const [lastCursor, setLastCursor] = createSignal(getNextCursor());
 
   // All the entries up until the current entry (and maybe fetch more on mobile)
   createEffect(() => {
-    if (init() || !state.params.entry_uuid || !query.hasNextPage) return;
+    if (init() || !state.params.entry_uuid || getNextCursor() === lastCursor() || !canFetchMore()) return;
+
+    setTimeout(() => {
+      const activeItem = findEntryItem(state.params.entry_uuid);
+      if (activeItem) activeItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, 500);
 
     const uuids = allEntries().map(entry => entry.uuid);
 
     const entryIsLoaded = uuids.includes(state.params.entry_uuid);
     const viewingLastMobile = viewport.lte('md') ? uuids[uuids.length - 1] === state.params.entry_uuid : false;
 
     // If the entry is not listed or if we're viewing the last item on mobile, fetch more entries
-    if (!entryIsLoaded || viewingLastMobile) {
+    if ((!entryIsLoaded && fetches() < MAX_FETCHES) || viewingLastMobile) {
       query.fetchNextPage();
+      setFetches(val => val + 1);
+      setLastCursor(getNextCursor());
       return;
     }
 
-    const activeItem = findEntryItem(state.params.entry_uuid);
-    if (activeItem) activeItem.focus();
-
     setInit(true);
   });