Notes

  1. Seriously, RTFM:
  2. Lazy loading is a client-side illusion. It's just sending requests for the next data as the user progresses in the app.
  3. page means a bunch of items, not a page in the traditional sense.
  4. page size is the number of items per page.
  5. Having an API that supports the parameters necesssary for lazy loading makes a lot of work trivial.
  6. Tanstack's useInfiniteQuery is a great tool for this on the client.
  7. API receives:
    • cursor (a.k.a offset) the starting point of the next page
    • count (a.k.a pageSize) how many items to return
  8. API sends back:
    • items list for the requested page
    • nextCursor to be used in the next request if there is a next page, otherwise null or undefined
    • totalItems (optional) to know when to stop requesting more items on the client
  9. Client stores all pages received so far and appends new pages to that list when new pages are fetched.
  10. Always let the user feel they know what's happening (with loading indicators, for example)
  11. Showing some sort of indication of the max items helps ground the "infinity"of the situation, improving UX.
  12. Making the loading skeletons have the exact same size as the items themselves makes things look much smoother. Though it may not always be possible.