Paginate expenses #30
Comments
|
I'll add that i like option 1 as well. As long as you can search and export I don't think you really need option 2. |
|
Agree, option 1 would work for me so long as search works well |
|
I would prefer a technique called "infinite scroll" over traditional "old-school" pagination. Infinite Scroll is a technique that automatically adds the next page as the user scrolls down through content, more content is loaded. User don’t need to wait for pages to preload. So infinite scroll can provide user a better experience. https://blog.logrocket.com/3-ways-implement-infinite-scroll-react/ |
I change my vote to this "Option 3" :) |
- display only this year's entries by default - a "Show more" button reveals all expenses
- display only this year's entries by default - a "Show more" button reveals all expenses
|
Here is my implementation of "option 3: infinite scroll": #95 |
* Extract ExpenseCard vom ExpenseList * Implement simple pagination of expenses (see #30) - display only this year's entries by default - a "Show more" button reveals all expenses * Turn getPrisma() into constant "prisma" - getPrisma() is not async and doesn't need to be awaited - turn getPrisma() into exported constant "prisma" * Select fields to be returned by getGroupExpenses() - make JSON more concise and less redundant - some properties were removed (i.e.instead of "expense.paidById" use "expense.paidBy.id") * Remove "participants" from ExpenseCard - no need to search for participant by id to get it's name - name property is already present in expense * Add option to fetch a slice of group expenses - specify offset and length to get expenses for [offset, offset+length[ - add function to get total number of group expenses * Add api route for client to fetch group expenses * Remove "Show more" button from expense list * Implement infinite scroll - in server component Page - only load first 200 expenses max - pass preloaded expenses and total count - in client component ExpenseList, if there are more expenses to show - test if there are more expenses - append preloading "skeletons" to end of list - fetch more expenses when last item in list comes into view - after each fetch increase fetch-length by factor 1.5 - rationale: db fetch usually is not the issue here, the longer the list gets, the longer react needs to redraw * Use server action instead of api endpoint * Fixes --------- Co-authored-by: Sebastien Castiel <sebastien@castiel.me>
The expense list can be slow when displaying several hundreds of transactions. It would make sense to paginate transactions, i.e. either:
My preference is on option 1, but open to discussion.
The text was updated successfully, but these errors were encountered: