Make WordPress Core

Opened 7 years ago

Closed 4 months ago

#28927 closed enhancement (invalid)

Media Grid "delay" in infinite scroll on Mobile

Reported by: Ipstenu Owned by: joedolson
Milestone: Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords: has-ui-feedback has-ux-feedback
Focuses: ui, accessibility, administration Cc:


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.

Change History (22)

This ticket was mentioned in IRC in #wordpress-dev by ipstenu. View the logs.

7 years ago

#2 @azaozz
7 years ago

  • Milestone changed from Awaiting Review to 4.0

#3 @ericlewis
7 years ago

  • Focuses ui administration added
  • Keywords ux-feedback ui-feedback added

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.

#4 @Ipstenu
7 years ago

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.

#5 follow-up: @ocean90
7 years ago

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.

#6 in reply to: ↑ 5 @helen
7 years ago

  • Milestone changed from 4.0 to Future Release
  • Type changed from defect (bug) to enhancement

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).

#7 @helen
7 years ago

#28998 was marked as a duplicate.

#8 @chriscct7
6 years ago

  • Keywords needs-patch added

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

4 years ago

#10 @melchoyce
4 years ago

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.

#11 @melchoyce
4 years ago

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

#12 @afercia
4 years ago

  • Focuses accessibility added

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

4 years ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

3 years ago

#15 @karmatosed
3 years ago

  • Keywords has-ui-feedback has-ux-feedback added; ux-feedback ui-feedback removed

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

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.

7 months ago

#17 @joedolson
7 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

#18 @joedolson
7 months ago

See #50105: removal of infinite scrolling behavior.

#19 @antpb
7 months ago

  • Milestone changed from Future Release to 5.8

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

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.

5 months ago

This ticket was mentioned in Slack in #core-media by hellofromtonya. View the logs.

5 months ago

#22 @joedolson
4 months ago

  • Keywords needs-patch removed
  • Milestone 5.8 deleted
  • Resolution set to invalid
  • Status changed from accepted to closed

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

Note: See TracTickets for help on using tickets.