WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 5 months ago

#28927 new enhancement

Media Grid "delay" in infinite scroll on Mobile

Reported by: Ipstenu Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords: ux-feedback ui-feedback needs-patch
Focuses: ui, accessibility, administration Cc:

Description

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 (12)

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


3 years ago

#2 @azaozz
3 years ago

  • Milestone changed from Awaiting Review to 4.0

#3 @ericlewis
3 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
3 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
3 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
3 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
3 years ago

#28998 was marked as a duplicate.

#8 @chriscct7
2 years ago

  • Keywords needs-patch added

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


5 months ago

#10 @melchoyce
5 months 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
5 months ago

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

#12 @afercia
5 months 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...

Note: See TracTickets for help on using tickets.