Skip to content

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

Merged
merged 1 commit into from
May 29, 2025

Conversation

acelaya
Copy link
Contributor

@acelaya acelaya commented May 21, 2025

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

  1. Create a bunch of annotations in a group. At least more than 5 for testing purposes.
  2. Apply this diff, so that annotations are loaded in small-enough chunks and you don't need to create a lot of annotations just to testing this:
    diff --git a/h/static/scripts/group-forms/utils/api/fetch-group-annotations.ts b/h/static/scripts/group-forms/utils/api/fetch-group-annotations.ts
    index 5a43bc8d0..f1a111c05 100644
    --- a/h/static/scripts/group-forms/utils/api/fetch-group-annotations.ts
    +++ b/h/static/scripts/group-forms/utils/api/fetch-group-annotations.ts
    @@ -20,7 +20,7 @@ export async function fetchGroupAnnotations(
    ): Promise<FetchGroupAnnotationsResult> {
      const query: Record<string, string | number> = paginationToParams({
        pageNumber,
    -    pageSize: 20,
    +    pageSize: 5,
      });
      if (moderationStatus) {
        query.moderation_status = moderationStatus;
  3. Go to http://localhost:5000/users/devdata_admin, and on the "Groups" dropdown, select the group in which you created annotations.
  4. Go to the "Moderation" tab.
  5. Resize the browser window so that you need to scroll to see all existing annotations.
  6. Scroll down, and observe how the next chunk of annotations is loaded.
  7. Continue scrolling until all annotations have been loaded, and notice it stops loading annotations.
  8. Change the filtering moderation status, and notice how the list is reset to start loading annotations from scratch.

@acelaya acelaya force-pushed the group-moderation-pagination branch 12 times, most recently from 1f34fc2 to cafd54a Compare May 23, 2025 13:15
@acelaya acelaya marked this pull request as ready for review May 23, 2025 13:44
@acelaya acelaya requested a review from robertknight May 23, 2025 13:44
@acelaya acelaya force-pushed the group-moderation-pagination branch from cafd54a to fce2008 Compare May 27, 2025 09:24
@robertknight
Copy link
Member

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 useSWRInfinite hook.

@acelaya acelaya force-pushed the group-moderation-pagination branch 6 times, most recently from 788908b to 81fe920 Compare May 28, 2025 13:22
@acelaya acelaya requested a review from robertknight May 28, 2025 13:24
Copy link
Member

@robertknight robertknight left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@acelaya acelaya force-pushed the group-moderation-pagination branch from 81fe920 to 029afb3 Compare May 29, 2025 08:04
@robertknight
Copy link
Member

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.

@acelaya acelaya merged commit 351d983 into main May 29, 2025
11 checks passed
@acelaya acelaya deleted the group-moderation-pagination branch May 29, 2025 08:42
@acelaya
Copy link
Contributor Author

acelaya commented May 29, 2025

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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow listing annotations in the moderation queue
2 participants