Media Grid "delay" in infinite scroll on Mobile

[Ipstenu]

Tested on iPhone and iPad on both Safari and Chrome

Both show the media in a largely readable, format (I might want to default to one column on iPad portrait view). The real issue is scrolling.

When you flick scroll, instead of actually loading the next page and displaying, it hits the bottom and 'bounces' as if there's nothing else to load. However if you slowly scroll, it loads properly.

Also once you've gotten 'infinite' to scroll, refreshing the page keeps that level of view, so you can't start over.

In both cases, after you scroll for a while, you'll crash the browser, however this is not endemic of WP, I can do that on Twitter and Instagram and has more to do with infinite scroll vs mobile devices. Once you get too much data, the mobile browsers do a serious derp and stop working right. They also start making scrolling really unbearably slow.

Suggestion: If possible, can we just have a click to load more button on mobile? It won't stop the crash issue, but it would stop the bounce.

[ericlewis]

The issue is that mobile doesn't trigger scroll events until after the scrolling has completely stopped, hence libraries such as ​iScroll filling that need.

I'm not sure a button is the answer here, as that's tedious.

Maybe we need to provide the user with more feedback at the end of the list - "No more media found" or "::spinner::Fetching more attachments...", so when the user gets to the end, they'll know what's happening.

[Ipstenu]

The button will help with the OTHER problem with mobiles (iOS ones at least) crashing, since you'll get the idea that perhaps you loaded too many images and the memory buffer barfed.

It's tedious, yes, but it would prevent some issues which are entirely outside our control.

[ocean90]

Can we mark this as an enhancement and revisit it in 4.1?
I have tried the media library on my iPhone with ~300 items and couldn't see an issues.

Add Themes has also infinite scroll and we should try to create a pattern, which can be used on both screens. I think something like "::spinner::Fetching more content..." sounds like a good idea.

[helen]

Replying to ocean90:

Can we mark this as an enhancement and revisit it in 4.1?

Yes. I think we may also need to examine unloading things when they are out of view - reminds me of this: ​http://airbnb.github.io/infinity/ (not necessarily a possible solution to implement, just the concept).

[helen]

#28998 was marked as a duplicate.

[melchoyce]

FWIW, I think we should consider mimicking Google here — load a bunch of images, and then after a certain point add a "load more" button to the end, both on desktop and mobile.

[melchoyce]

(We should also lazy-load images in the media library, IMO.)

[afercia]

add a "load more" button to the end

A big +1 for this! See #40330 "Reconsider the usage of infinite scrolling across the admin". There are also some performance concerns related to memory usage...

[karmatosed]

@melchoyce already gave design feedback so let's progress this to be worked on and remove the design keywords for now.

[joedolson]

See #50105: removal of infinite scrolling behavior.

[antpb]

Mentioned in the recent Media Component meeting, this looks like a good ticket for 5.8. Adding to the milestone.

[joedolson]

With the commit of #50105 removing infinite scroll, this ticket is made obsolete. I guess that makes it invalid now? Eh. Seems reasonable. ;)