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 pagecount
(a.k.a pageSize) how many items to return
- API sends back:
items
list for the requested pagenextCursor
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.