WordPress Trac: Ticket #28927: Media Grid "delay" in infinite scroll on Mobilehttp://core.trac.wordpress.org/ticket/28927
<p>
Tested on iPhone and iPad on both Safari and Chrome
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
Also once you've gotten 'infinite' to scroll, refreshing the page keeps that level of view, so you can't start over.
</p>
<p>
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.
</p>
<p>
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.
</p>
en-usWordPress Trachttp://core.trac.wordpress.org/chrome/site/your_project_logo.pnghttp://core.trac.wordpress.org/ticket/28927
Trac 1.2.2ircbotWed, 16 Jul 2014 21:47:02 GMThttp://core.trac.wordpress.org/ticket/28927#comment:1
http://core.trac.wordpress.org/ticket/28927#comment:1
<p>
<em>This ticket was mentioned in IRC in #wordpress-dev by ipstenu. <a class="ext-link" href="http://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&amp;day=2014-07-16&amp;sort=asc#m890793"><span class="icon">​</span>View the logs</a>.</em>
</p>
TicketazaozzWed, 16 Jul 2014 21:52:02 GMTmilestone changedhttp://core.trac.wordpress.org/ticket/28927#comment:2
http://core.trac.wordpress.org/ticket/28927#comment:2
<ul>
<li><strong>milestone</strong>
changed from <em>Awaiting Review</em> to <em>4.0</em>
</li>
</ul>
TicketericlewisMon, 21 Jul 2014 17:04:11 GMTkeywords, focuses sethttp://core.trac.wordpress.org/ticket/28927#comment:3
http://core.trac.wordpress.org/ticket/28927#comment:3
<ul>
<li><strong>keywords</strong>
<em>ux-feedback</em> <em>ui-feedback</em> added
</li>
<li><strong>focuses</strong>
<em>ui</em> <em>administration</em> added
</li>
</ul>
<p>
The issue is that mobile doesn't trigger scroll events until after the scrolling has completely stopped, hence libraries such as <a class="ext-link" href="http://cubiq.org/iscroll-5"><span class="icon">​</span>iScroll</a> filling that need.
</p>
<p>
I'm not sure a button is the answer here, as that's tedious.
</p>
<p>
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.
</p>
TicketIpstenuMon, 21 Jul 2014 18:21:23 GMThttp://core.trac.wordpress.org/ticket/28927#comment:4
http://core.trac.wordpress.org/ticket/28927#comment:4
<p>
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.
</p>
<p>
It's tedious, yes, but it would prevent some issues which are entirely outside our control.
</p>
Ticketocean90Sun, 17 Aug 2014 16:00:41 GMThttp://core.trac.wordpress.org/ticket/28927#comment:5
http://core.trac.wordpress.org/ticket/28927#comment:5
<p>
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.
</p>
<p>
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.
</p>
TickethelenWed, 20 Aug 2014 18:11:45 GMTtype, milestone changedhttp://core.trac.wordpress.org/ticket/28927#comment:6
http://core.trac.wordpress.org/ticket/28927#comment:6
<ul>
<li><strong>type</strong>
changed from <em>defect (bug)</em> to <em>enhancement</em>
</li>
<li><strong>milestone</strong>
changed from <em>4.0</em> to <em>Future Release</em>
</li>
</ul>
<p>
Replying to <a class="ticket" href="http://core.trac.wordpress.org/ticket/28927#comment:5" title="Comment 5">ocean90</a>:
</p>
<blockquote class="citation">
<p>
Can we mark this as an enhancement and revisit it in 4.1?
</p>
</blockquote>
<p>
Yes. I think we may also need to examine unloading things when they are out of view - reminds me of this: <a class="ext-link" href="http://airbnb.github.io/infinity/"><span class="icon">​</span>http://airbnb.github.io/infinity/</a> (not necessarily a possible solution to implement, just the concept).
</p>
TickethelenWed, 20 Aug 2014 18:12:04 GMThttp://core.trac.wordpress.org/ticket/28927#comment:7
http://core.trac.wordpress.org/ticket/28927#comment:7
<p>
<a class="closed ticket" href="http://core.trac.wordpress.org/ticket/28998" title="#28998: enhancement: Media Grid: user feedback during content load (closed: duplicate)">#28998</a> was marked as a duplicate.
</p>
Ticketchriscct7Thu, 03 Dec 2015 20:00:53 GMTkeywords changedhttp://core.trac.wordpress.org/ticket/28927#comment:8
http://core.trac.wordpress.org/ticket/28927#comment:8
<ul>
<li><strong>keywords</strong>
<em>needs-patch</em> added
</li>
</ul>
TicketslackbotMon, 31 Jul 2017 16:30:08 GMThttp://core.trac.wordpress.org/ticket/28927#comment:9
http://core.trac.wordpress.org/ticket/28927#comment:9
<p>
<em>This ticket was mentioned in <a class="ext-link" href="https://make.wordpress.org/chat/"><span class="icon">​</span>Slack</a> in #design by karmatosed. <a class="ext-link" href="https://wordpress.slack.com/archives/design/p1501518606526526"><span class="icon">​</span>View the logs</a>.</em>
</p>
TicketmelchoyceMon, 31 Jul 2017 16:42:30 GMThttp://core.trac.wordpress.org/ticket/28927#comment:10
http://core.trac.wordpress.org/ticket/28927#comment:10
<p>
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.
</p>
TicketmelchoyceMon, 31 Jul 2017 16:44:03 GMThttp://core.trac.wordpress.org/ticket/28927#comment:11
http://core.trac.wordpress.org/ticket/28927#comment:11
<p>
(We should also lazy-load images in the media library, IMO.)
</p>
TicketaferciaMon, 31 Jul 2017 18:04:34 GMTfocuses changedhttp://core.trac.wordpress.org/ticket/28927#comment:12
http://core.trac.wordpress.org/ticket/28927#comment:12
<ul>
<li><strong>focuses</strong>
<em>accessibility</em> added
</li>
</ul>
<blockquote class="citation">
<p>
add a "load more" button to the end
</p>
</blockquote>
<p>
A big +1 for this! See <a class="new ticket" href="http://core.trac.wordpress.org/ticket/40330" title="#40330: defect (bug): Reconsider the usage of infinite scrolling across the admin (new)">#40330</a> "Reconsider the usage of infinite scrolling across the admin". There are also some performance concerns related to memory usage...
</p>
TicketslackbotMon, 05 Feb 2018 16:21:46 GMThttp://core.trac.wordpress.org/ticket/28927#comment:13
http://core.trac.wordpress.org/ticket/28927#comment:13
<p>
<em>This ticket was mentioned in <a class="ext-link" href="https://make.wordpress.org/chat/"><span class="icon">​</span>Slack</a> in #accessibility by afercia. <a class="ext-link" href="https://wordpress.slack.com/archives/accessibility/p1517847705000489"><span class="icon">​</span>View the logs</a>.</em>
</p>
Ticket