Notes

• Read the docs
• Lazy loading is a client-side illusion. It's just sending requests for the next data as the user progresses in the app.
• page means a bunch of items, not a page in the traditional sense.
• page size is the number of items per page.
• Having an API that supports the parameters necesssary for lazy loading makes a lot of work trivial.
• Tanstack's useInfiniteQuery is a great tool for this on the client.
• API receives:
  • cursor (a.k.a offset) the starting point of the next page
  • count (a.k.a pageSize) how many items to return
• 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
• Client stores all pages received so far and appends new pages to that list when new pages are fetched.
• Always let the user feel they know what's happening (with loading indicators, for example)
• Showing some sort of indication of the max items helps ground the "infinity"of the situation, improving UX.
• 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.