useAsyncList list.cursor not updating

[developedbyluke]

Can anybody help me with getting the cursor to update each time the load function runs? I've read the docs and am trying to implement infinite loading/scroll/pagination. In the examples, you just return items and cursor and it handles updating the cursor for the next load but mine is not working even with the most basic example to test.

const list = useAsyncList({
    async load({ signal, cursor }) {
        console.log("Load function started, cursor:", cursor);

        return {
            items: [],
            cursor: "Updated cursor"
        };
    }
});

useEffect(() => {
    const interval = setInterval(() => {
        list.reload();
    }, 5000);

    return () => clearInterval(interval);
}, [list]);

Load function started, cursor: null
Load function started, cursor: null

This is the intended implementation that is supposed to get data in chunks from Firestore and show the initial data in a NextUI Table component before loading in more data when needed as you scroll down the page:

let list = useAsyncList({
        async load({ signal, cursor }) {
            console.log("Load function started, cursor:", cursor);
            const siteName = selectedSite.replace(" ", "");
            let scoreCards = [];
            let nextCursor = null;

            if (monthYear === "All Months") {
                const result = await fetchPaginatedAllMonthsData(siteName, cursor);
                scoreCards = result.scoreCards;
                nextCursor = result.nextCursor;
            } else {
                const monthRef = doc(db, "scores", "months", monthYear);
                const snapshot = await getDoc(monthRef, { signal });

                if (snapshot.exists()) {
                    const monthData = snapshot.data();
                    scoreCards = monthData.data || [];
                    nextCursor = scoreCards.length > 0 ? scoreCards[scoreCards.length - 1].timestamp : null;
                }
            }

            console.log("nextCursor:", nextCursor);
            return { items: scoreCards, cursor: nextCursor };
        }
    });

    const fetchPaginatedAllMonthsData = async (siteName, cursor, pageSize = 20) => {
        let allScoreCards = [];
        let lastDoc = null;
        let foundCursor = !cursor;

        const parseMonthYear = (monthYear) => {
            const [month, year] = monthYear.split(" ");
            return new Date(`${month} 1, ${year}`);
        };

        const monthsRef = collection(db, "scores", "months");
        const monthsSnapshot = await getDocs(monthsRef);

        const sortedDocs = monthsSnapshot.docs.sort(
            (a, b) => parseMonthYear(a.id).getTime() - parseMonthYear(b.id).getTime()
        );

        for (const monthDoc of sortedDocs) {
            if (!foundCursor) {
                if (monthDoc.id === cursor) {
                    foundCursor = true;
                }
                continue;
            }

            if (allScoreCards.length >= pageSize) break;

            const monthData = monthDoc.data();
            const monthScoreCards = monthData.data || [];

            allScoreCards = [...allScoreCards, ...monthScoreCards];
            lastDoc = monthDoc;

            if (allScoreCards.length >= pageSize) {
                allScoreCards = allScoreCards.slice(0, pageSize);
                break;
            }
        }

        return {
            scoreCards: allScoreCards,
            nextCursor: lastDoc ? lastDoc.id : null
        };
    };

[LFDanLu]

The cursor is returned to your load function when you perform a list.loadMore call: https://codesandbox.io/s/competent-euclid-pf4c5p?file=/src/App.js but it is tracked internally starting from your initial load. For your implementation, you should call list.loadMore when the Table is scrolled down far enough similar to how we do it for our TableView's Virtualizer:

react-spectrum/packages/@react-aria/virtualizer/src/Virtualizer.tsx

Lines 184 to 194 in 0c31321

	let onVisibleRectChange = useCallback((rect: Rect) => {
	state.setVisibleRect(rect);
	if (!isLoadingRef.current && onLoadMore) {
	let scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
	if (rect.y > scrollOffset) {
	isLoadingRef.current = true;
	onLoadMore();
	}
	}
	}, [onLoadMore, state]);

. Looks like for NextUI tables you can do this like so: https://nextui.org/docs/components/table#infinite-pagination

[developedbyluke]

Thank you!