Web-stories-wp: Media Library - Infinite Scroll

[spacedmonkey]

Feature description

When a user reaches the end of the library, more media will loaded from the REST API be displayed.

Design

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance criteria

1. The library will be paginated (100 per page)
2. When the user scrolls to the bottom, a "loading" animation is displayed (UX needed)
3. After the user uses the search bar or filter, the media library should reset page count and the user should be brought to the top if they were scrolled down
4. When the user reaches the bottom of the library, ??
5. empty state (drag and drop message), no search or filter results (popup message)

Implementation brief

QA testing instructions

Demo

Changelog entry

[spacedmonkey]

We could possibly use react-infinite-scroller or react-infinite-scroll-component.

[dvoytenko]

Let us know if any of these libraries appeal to you for any specific reason. IMHO, the infinite scroll is a not a very complicated story for us. A critical piece for us is to know the visibility of the items, given that we may have to heavily use image/video loading. And, quickly scanning through this libraries, I'm not seeing anything related to visibility there. LMK if you see something relevant for that.

[jauyong]

@pbakaus @samitron7
RE: Drag to add media to the Media Panel

Any media that is dragged into the Media Panel should show up instantly in the panel. If the media is not uploaded immediately, show the uploading UI. Do not show any actions of the item on hover until it is fully uploaded.

Question: Media is shown most recently uploaded first. If a user has scrolled down in the media library and they drag to upload, should they be scrolled back up to the top to show them the in-progress upload?

[pbakaus]

@pbakaus @samitron7
RE: Drag to add media to the Media Panel

Any media that is dragged into the Media Panel should show up instantly in the panel. If the media is not uploaded immediately, show the uploading UI. Do not show any actions of the item on hover until it is fully uploaded.

Question: Media is shown most recently uploaded first. If a user has scrolled down in the media library and they drag to upload, should they be scrolled back up to the top to show them the in-progress upload?

Yes, exactly. That's. defined in the product spec as well.

[pbakaus]

@samitron7 Jason's comment from Slack: "Please see unknown for AC4, UX for when user reaches the end of scroll.
Please see AC2, UX required for loading animation."

[spacedmonkey]

Before working on this ticket, we should tackle #435 .

[jauyong]

flagging @samitron7 for loading animation when reaching the bottom

[jauyong]

Hey @samitron7
I was looking at the link provided in your Standup Alice post. I see the P0 version in figma. I don't see:

1. When the user scrolls to the bottom, a "loading" animation is displayed (UX needed). @spacedmonkey is this for when the user is scrolling too fast and it's taking a while to load so we need an animation?
2. When the user reaches the bottom of the library, ??. I would say for Alpha it just ends without any cute message or anything like that, do you agree? There are already notes in Figma about the scroll bar behvaiour.

CC: @merapi

[spacedmonkey]

When the user scrolls to the bottom, a "loading" animation is displayed (UX needed). @spacedmonkey is this for when the user is scrolling too fast and it's taking a while to load so we need an animation?

At the moment, we do not, which is why we wanted UX feedback. It currently just shows white text of Loading.... Which is basically unstyled ATM. I don't love this, but for alpha, I could live with it. As long as we loop around on it later.

[jauyong]

Looping in @pbakaus RE:
For Alpha we will have:

1. An unstyled Loading...
2. Nothing will happen or appear when the user scrolls to the bottom. It will just end and the user can't scroll anymore.

[samitron7]

@pbakaus @jauyong In regards to Jason't question:

1) Media is shown most recently uploaded first. If a user has scrolled down in the media library and they drag to upload, should they be scrolled back up to the top to show them the in-progress upload?

I do not think they they be scrolled back to the top. I think a better way to do this is to display a uploading message in the media library panel (Figma). You never want to change the location for the users. It's terribly jarring.

2) When the user scrolls to the bottom, a "loading" animation is displayed (UX needed). @spacedmonkey is this for when the user is scrolling too fast and it's taking a while to load so we need an animation?

@spacedmonkey Can you confirm that its just a static loading message that is needed and not a button that they user needs to hit to trigger loading of the next set of media. If it's just a message, that is already in Figma

3) When the user reaches the bottom of the library, ??. I would say for Alpha it just ends without any cute message or anything like that, do you agree? There are already notes in Figma about the scroll bar behvaiour.

Correct, the scroll is enough indication that you're at the bottom. So this behavior is the same for P0 and after.

[jauyong]

I have created a follow up #662 to add the styling that was missing by the time this ticket was closed.

@pbakaus @samitron7 There seems to be discrepancy on the behaviour between Paul's confirmation above and Sam's response directly above this comment.

[pbakaus]

@jauyong good catch. Sam and I are discussing as we speak. We'll give an update on this soon.