Fix data fetching in content management #17
Conversation
…row count and loading state
…ltRowsPerPage and improve pagination handling
…RowsPerPage and improve pagination handling
…ate indicators for categories, headlines, and sources
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @fulleni, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request significantly refines the data fetching and pagination mechanisms within the content management section. The core change involves transitioning from a full data replacement model to an additive one for paginated results, enabling a smoother infinite scrolling experience. It also centralizes pagination constants and adds visual feedback for loading states, leading to a more robust and user-friendly data display.
Highlights
- Pagination Logic Enhancement: Implemented infinite scrolling/pagination for headlines, categories, and sources by modifying the BLoC to append newly fetched paginated items to the existing state lists, rather than replacing them. This ensures a continuous data display as users navigate through pages.
- Centralized Pagination Constant: Introduced a new constant file (
pagination_constants.dart) to centralize thekDefaultRowsPerPagevalue. This replaces hardcoded pagination limits across various view files, improving maintainability and consistency. - Improved Pagination UI/UX: Enhanced the user experience for paginated data tables by displaying a
CircularProgressIndicatorwhen more data is being fetched. TheDataTableSourceimplementations now correctly manageisRowCountApproximateandrowCountto enable the 'next page' button and indicate loading states. - Consistent Data Reloading: Ensured that after create, update, or delete operations for headlines, categories, and sources, the data is reloaded with the
kDefaultRowsPerPagelimit. This guarantees that the displayed data is always up-to-date and consistent with the pagination settings.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
The pull request fixes pagination logic and introduces a shared constant for the number of rows per page. The rowCount logic in the DataTableSource implementations for categories, headlines, and sources can lead to many empty rows being displayed. After a create, update, or delete operation, the data lists are reloaded from the first page, resetting the user's pagination.
| add( | ||
| const LoadHeadlinesRequested(limit: kDefaultRowsPerPage), | ||
| ); |
There was a problem hiding this comment.
Reloading the first page after a CUD operation can be a poor user experience if the user has paginated. Consider optimistic updates or invalidation with smart refetching to maintain the user's position.
| int get rowCount { | ||
| // If we have more items to fetch, we add 1 to the current length. | ||
| // This signals to PaginatedDataTable2 that there is at least one more page, | ||
| // which enables the 'next page' button. | ||
| if (hasMore) { | ||
| // When loading, we show an extra row for the spinner. | ||
| // Otherwise, we just indicate that there are more rows. | ||
| return isLoading ? categories.length + 1 : categories.length + kDefaultRowsPerPage; | ||
| } | ||
| return categories.length; | ||
| } |
There was a problem hiding this comment.
Returning categories.length + kDefaultRowsPerPage when hasMore is true but not loading will cause the PaginatedDataTable2 to render kDefaultRowsPerPage empty rows at the end of the table. To simply signal that there are more pages, you only need to return a rowCount that is greater than the current number of items. A rowCount of categories.length + 1 is sufficient to enable the 'next page' button when isRowCountApproximate is true.
int get rowCount {
if (hasMore) {
return categories.length + 1;
}
return categories.length;
}
| int get rowCount { | ||
| // If we have more items to fetch, we add 1 to the current length. | ||
| // This signals to PaginatedDataTable2 that there is at least one more page, | ||
| // which enables the 'next page' button. | ||
| if (hasMore) { | ||
| // When loading, we show an extra row for the spinner. | ||
| // Otherwise, we just indicate that there are more rows. | ||
| return isLoading ? headlines.length + 1 : headlines.length + kDefaultRowsPerPage; | ||
| } | ||
| return headlines.length; | ||
| } |
There was a problem hiding this comment.
Returning headlines.length + kDefaultRowsPerPage when hasMore is true but not loading will cause the data table to render multiple empty rows at the end. A simpler and more correct approach is to return headlines.length + 1. This is enough to signal to PaginatedDataTable2 that there's another page available (when isRowCountApproximate is true) without creating a large block of empty space in the UI.
int get rowCount {
if (hasMore) {
return headlines.length + 1;
}
return headlines.length;
}
| int get rowCount { | ||
| // If we have more items to fetch, we add 1 to the current length. | ||
| // This signals to PaginatedDataTable2 that there is at least one more page, | ||
| // which enables the 'next page' button. | ||
| if (hasMore) { | ||
| // When loading, we show an extra row for the spinner. | ||
| // Otherwise, we just indicate that there are more rows. | ||
| return isLoading | ||
| ? sources.length + 1 | ||
| : sources.length + kDefaultRowsPerPage; | ||
| } | ||
| return sources.length; | ||
| } |
There was a problem hiding this comment.
Returning sources.length + kDefaultRowsPerPage when hasMore is true and not loading will create kDefaultRowsPerPage empty rows in your table. To correctly enable pagination and show a loading indicator when needed, you only need to return sources.length + 1 when hasMore is true. This will enable the 'next page' button and provide a single row for the loading spinner when isLoading is true, avoiding the empty space.
int get rowCount {
if (hasMore) {
return sources.length + 1;
}
return sources.length;
}
Status
READY/IN DEVELOPMENT/HOLD
Description
Type of Change