-
Notifications
You must be signed in to change notification settings - Fork 442
Load moderation queue in chunks as the user scrolls #9581
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
1f34fc2
to
cafd54a
Compare
cafd54a
to
fce2008
Compare
A note for future refactoring: The data-fetching hooks we have in the LMS app were modeled on SWR, with simplifications and adjustments for our needs. One reference point for designing a hook for infinite scroll is the |
788908b
to
81fe920
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
h/static/scripts/group-forms/hooks/test/use-group-annotations-test.js
Outdated
Show resolved
Hide resolved
81fe920
to
029afb3
Compare
On macOS the scroll bar rebounds/bounces when it hits the bottom. In testing I found that when scrolling to the bottom, the scroll would sometimes overshoot the threshold by 20+ pixels and bounce while the content was loading. I'm not sure what the best solution is here, it might simply involve increasing the threshold a bit. I'd suggest to get this merged first and handle that in a follow-up. |
And is this triggering duplicated calls? In theory I implemented it so that a call is ignored if there's another one in progress, but it's possible there's some race condition that makes the logic a bit more brittle than I anticipated. |
Closes #9545
Follow up after #9556, which adds the necessary logic to load the moderation queue in paginated chunks, starting with the first page, and loading extra pages as you scroll.
moderation-queue-chunks-2025-05-23_15.30.45.mp4
Note
The screen recording above has been done with network throttling for illustration purposes.
The amount of annotations we load per page is 20. That should ensure there's a scrollable area in most screen resolutions, but this will be even more so after proper annotation cards have been implemented.
Considerations
The logic to decide whether or not more pages should be loaded is based on the one we implemented in LMS for the dashboard filter dropdowns, with the difference that here it works based on the window scroll, rather a specific DOM element's.
On top of that, the logic is build for scroll-based pagination, but supporting page-number-based pagination should not be too hard. We would just have to change the
loadNextPage
function to allow passing the page number to load, and stop tracking the value internally.Testing steps