Page MenuHomePhabricator

Implement infinite scrolling on participant list in EventDetails
Open, Needs TriagePublic5 Estimated Story Points

Description

As an organizer or participant, I want to be able to scroll through the list of participants on EventDetails, so that I can see the full list of everyone who is attending the event.

Resources:

Acceptance Criteria:

  • Allow infinite scrolling on participant list on EventDetails page
  • Scrolling should be available to all users (organizers, participants, and people who happen to come upon the page)
  • When a user scrolls down the list of participants, we will call the API to get next batch of participants.
  • The whole list should not be loaded into the front-end intially
  • Initial load is 20 participants, each subsequent scroll is also 20
  • Documentation of the "list participants" API endpoint is updated with the new request parameters and response data

Visual Example (but it has no infinite scrolling):

Screen Shot 2022-04-29 at 12.44.56 PM.png (1ร—2 px, 215 KB)

Event Timeline

ifried renamed this task from Implement infinite scrolling on participant list to Implement infinite scrolling on participant list in EventDetails.Jun 9 2022, 12:15 PM
ifried updated the task description. (Show Details)

@gonyeahialam In estimation today, we came up with the following acceptance criteria: "Initial load is 20 participants, each subsequent scroll is also 20." Let us know if that is okay or if you have any thoughts. Thanks!

There is an issue to display the Date and time as is it on the wireframes, I am sending below the link with the format options we have available at the moment:
https://www.mediawiki.org/wiki/Manual:WfTimestamp#:~:text=wfTimestamp()%20(part%20of%20GlobalFunctions,RFC%202822%20format%20and%20more.

Screen Shot 2022-06-27 at 10.53.43.png (875ร—1 px, 204 KB)

@gonyeahialam @ifried @Daimona

There is an issue to display the Date and time as is it on the wireframes, I am sending below the link with the format options we have available at the moment:
https://www.mediawiki.org/wiki/Manual:WfTimestamp#:~:text=wfTimestamp()%20(part%20of%20GlobalFunctions,RFC%202822%20format%20and%20more.
@gonyeahialam @ifried @Daimona

Also noting that this is just for V0, and until T21992 is resolved (which is perhaps not easy).

Change 809008 had a related patch set uploaded (by Cmelo; author: Cmelo):

[mediawiki/extensions/CampaignEvents@master] Add the ability to load more participants on scroll

https://gerrit.wikimedia.org/r/809008

Test wiki created on Patch demo by CMelo (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/db24d0734b/w/

Test wiki created on Patch demo by CMelo (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/ede8054ee2/w/

Change 813640 had a related patch set uploaded (by Cmelo; author: Cmelo):

[mediawiki/extensions/CampaignEvents@master] Add the ability to load more participants on scroll

https://gerrit.wikimedia.org/r/813640

Change 813640 abandoned by Daimona Eaytoy:

[mediawiki/extensions/CampaignEvents@master] Add the ability to load more participants on scroll

Reason:

https://gerrit.wikimedia.org/r/813640

Test wiki on Patch demo by CMelo (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/db24d0734b/w/

Change 809008 merged by jenkins-bot:

[mediawiki/extensions/CampaignEvents@master] Add the ability to load more participants on scroll

https://gerrit.wikimedia.org/r/809008

Infinite scroll is working correctly, bringing back 20 users at a time at Special:EventDetails/{id} for all users (organizers, participants, and people who happen to come upon the page)

Screen Recording 2022-07-27 at 6.37.12 PM.mov-4732E5EE-7E90-404F-83E8-7B6242F2CED1.gif (567ร—720 px, 2 MB)

A couple of things that I think could be improved that are not in the AC of this ticket but we might want to make tickets for if we don't want to fix them in the scope of this ticket @ifried. The first item I feel would be a helpful improvement, and for the second I am not sure how much effort it would be from dev, so it may or may not be worth it :

  1. It would be good to have some sort of a spinner or progress bar at the bottom of the scroll that displays while more participants are actively being loaded in, to show the user that more participants are being loaded into the list. @gonyeahialam do you have thoughts on this?
  2. There is an unnecessary API call at the end of the scroll. For example, in the video clip above, when it reaches the end of the entire list of 42 participants, it does one more API call that brings back an empty array, even though there were only 2 participants loaded in in the prior call. That call is not needed because all of the participants have already been loaded into the UI. See below screenshot:

Screen Shot 2022-07-27 at 7.16.48 PM.png (344ร—1 px, 49 KB)


Also, for the following AC: Documentation of the "list participants" API endpoint is updated with the new request parameters and response data

@cmelo The docs for this endpoint at https://www.mediawiki.org/wiki/Extension:CampaignEvents/Api#List_the_participants_of_a_registration need to be updated to reflect the last_participant_id query param that is being used. Please tag me on this ticket when you get a chance to update that.

Infinite scroll is working correctly, bringing back 20 users at a time at Special:EventDetails/{id} for all users (organizers, participants, and people who happen to come upon the page)

Screen Recording 2022-07-27 at 6.37.12 PM.mov-4732E5EE-7E90-404F-83E8-7B6242F2CED1.gif (567ร—720 px, 2 MB)

A couple of things that I think could be improved that are not in the AC of this ticket but we might want to make tickets for if we don't want to fix them in the scope of this ticket @ifried. The first item I feel would be a helpful improvement, and for the second I am not sure how much effort it would be from dev, so it may or may not be worth it :

  1. It would be good to have some sort of a spinner or progress bar at the bottom of the scroll that displays while more participants are actively being loaded in, to show the user that more participants are being loaded into the list. @gonyeahialam do you have thoughts on this?
  2. There is an unnecessary API call at the end of the scroll. For example, in the video clip above, when it reaches the end of the entire list of 42 participants, it does one more API call that brings back an empty array, even though there were only 2 participants loaded in in the prior call. That call is not needed because all of the participants have already been loaded into the UI. See below screenshot:

Screen Shot 2022-07-27 at 7.16.48 PM.png (344ร—1 px, 49 KB)


Also, for the following AC: Documentation of the "list participants" API endpoint is updated with the new request parameters and response data

@cmelo The docs for this endpoint at https://www.mediawiki.org/wiki/Extension:CampaignEvents/Api#List_the_participants_of_a_registration need to be updated to reflect the last_participant_id query param that is being used. Please tag me on this ticket when you get a chance to update that.

Thank you so much @vaughnwalters, I will update the API doc!