SnippetJavaScript
Infinite Pagination
Cursor/page-based fetch helper with abort support for “load more” UIs.
Explanation
Separates pagination state from UI. Supports abort so rapid navigation doesn’t apply stale pages. Use with infinite scroll or a Load more button.
javascript
export function createPaginator({ fetchPage, initialPage = 1 }) {
let page = initialPage;
let done = false;
let controller;
return {
get page() { return page; },
get done() { return done; },
async next() {
if (done) return { items: [], done: true };
controller?.abort();
controller = new AbortController();
const result = await fetchPage(page, controller.signal);
const items = result.items ?? [];
done = Boolean(result.done) || items.length === 0;
if (!done) page += 1;
return { items, done };
},
reset() {
controller?.abort();
page = initialPage;
done = false;
},
};
}Usage example
javascript
const pager = createPaginator({
async fetchPage(page, signal) {
const res = await fetch(`/api/items?page=${page}`, { signal });
const data = await res.json();
return { items: data.items, done: !data.next };
},
});
const { items } = await pager.next();