Page MenuHomePhabricator

[M] Media Search: Infinite Scroll behavior
Closed, ResolvedPublic


Currently our infinite scroll behavior is a bit jarring and doesn't allow users to ever reach the footer.

In order to improve this experience:

  1. We currently load about 40 photos and don't start loading the next batch until you've reached the bottom. Can we start the next batch loading as soon as a person starts scrolling in order to limit the abrupt stop/loading icon once you get to that 10th ish row? Up for any other ideas or approaches to make the transition between batches more seamless.
  2. After loading two additional batches of images we could stop infinite scroll with a "Load more" button in order to allow users to access the footer. After pressing on "Load more", infinite scroll would continue indefinitely without the load more button.
    Screen Shot 2020-07-21 at 11.54.03 AM.png (1×1 px, 2 MB)
  3. While an image is still loading is there anyway to make the background color Base80 (#eaecf0) so the page doesn't look broken? Extra credit would be for us to look into a pulse type bg color animation between Base80 and 90 to inform the user that something is still loading.
    bg.png (491×1 px, 278 KB)

During development, please test the following:

  • Test this feature while logged in AND logged out
  • Test this feature on at least one mobile browser

Event Timeline

Current behavior loads results (for all file types) in batches of 40. Number of rows will depend on a lot of factors like thumbnail proportions, size of the user's screen, etc. and probably shouldn't be relied on by us. But if the goal is to start loading the next batch before the user scrolls to the end of the current batch, there are ways we could try to make this happen.

Regarding the behavior suggested behavior above, when you say "indefinitely" do you mean that we'd keep auto-loading additional results as long as the user continued scrolling?

Or do you want to auto-load 2 batches and then show the "Load more" button again in an alternating cycle that repeats as long as there are results to show? We could also use a larger batch size if that's desirable.

We may also want to think about a "you've reached the end" empty state that could finally show up at the end of a long list of results (though maybe that's not necessary).

mwilliams updated the task description. (Show Details)

@egardner Updated my description to make it clearer and more accurate around "indefinitely" and how many images are in a batch. And you are correct, the main goal is making the transition between batches seamless which probably involves loading before the user gets to the end of the current batch.

Good idea on some sort of messaging "You've reached the end", I'll try that out.

CBogen renamed this task from Media Search: Infinite Scroll behavior to [M] Media Search: Infinite Scroll behavior .Aug 5 2020, 4:23 PM
Etonkovidova added a subscriber: Etonkovidova.

@mwilliams - Looks as all specs are in place - the scrolling and loading is smooth. It'd be great if you review - you may click on the animated gif below (from commons betalabs). The in the task description refers to the spec part that says:

Extra credit would be for us to look into a pulse type bg color animation between Base80 and 90 to inform the user that something is still loading.

Not quite sure if it's in place.

media_search_load3.gif (739×1 px, 3 MB)

I checked it only one type of mobile device - iPhone 6s (browser emulators do not provide a correct UI layout in this case). Need to check in production thoroughly since the data set in betalabs is not representative.

Checked on commons wmf.6 - looks fine. If @mwilliams doesn't have any adjustments/comments -then the task can be Resolved.