Paging

Prefetch-based list paging: Next from a cached next page, never page.length === limit. Use when implementing Previous/Next, offset/limit pages, hasMore, list pagination, or choosing pages vs infinite scroll.

Spencer1O1 Updated

File contents

Paging

Law

  1. Prefetch the next page into memory whenever the current page is shown.
  2. Next enabled ⇔ that cached next page exists and has length > 0. Empty prefetch ⇒ disable Next.
  3. On Next: paint the cached page immediately, then prefetch the page after it.
  4. Never derive hasMore / Next from page.length === pageSize (lies when the last page is exactly full).
  5. Prefer Previous / Next on the document over a nested max-height infinite scroller when the screen has footer actions (Clear, Save, Delete, …) — nested scroll traps gestures and buries the footer.

API

  • Offset/limit or cursor — fine.
  • Return rows only. Do not ship a guessed hasMore boolean; the UI learns that from the prefetch.

Anti-patterns

  • hasMore = runs.length === limit
  • Fetching the destination page only after Next is pressed (always-spinner)
  • Infinite scroll inside a tall nested container so the page cannot scroll past the list

Spencer1O1/cursor-skills/tree/main/paging commit 515b736961

Frequently asked questions

npx skillmds@latest add spencer1o1/paging