Page MenuHomePhabricator

Images reloading unexpected when scrolling off and on screen
Closed, ResolvedPublic

Description

Problem

When images are scrolled off screen in, they appear to be 'reloading' if they are scrolled back onto screen again.
Example of this issue (open full screen to see animated gif):

Why this is problematic:

  • It gives the wrong impression that more data is being used to fetch the image again
  • Wrong impression that the app performance is slow
  • Reloading images is visually jarring

Solution
Dbrant's Gerrit patch comment:
Remove default fade-in animation from Fresco drawees.
This makes image loading feel snappier, especially when scrolling RecyclerView items that contain images.
This also adds an explicit opaque placeholder image which uses the correct background color based on designs, while still allowing the background of loaded images to remain white.

Steps to QA

Note: Using a slower connection will help for this test

  1. Open the feed
  2. Scroll down to view feed content. It is expected that the images in thumbnails and cards will show firstly in gray background color containers until the image loads.
  3. Keep scrolling down after images have finished loading in a view
  4. Scroll back up. It is expected that the images previously loaded remain shown when scrolled back into view.

Event Timeline

Change 395770 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Remove default fade-in animation from Fresco drawees.

https://gerrit.wikimedia.org/r/395770

Change 395770 merged by jenkins-bot:
[apps/android/wikipedia@master] Remove default fade-in animation from Fresco drawees.

https://gerrit.wikimedia.org/r/395770

This comment has been deleted.
ABorbaWMF added a subscriber: ABorbaWMF.

Tested v2.6.206-alpha-2017-12-04 on a Pixel and Nexus 4

This one looks fixed to me. I tried the 'on this day' and 'in the news cards' both on the feed and within the card pages. I am not seeing image reloads.

@RHo I did notice that it is really easy to dismiss the 'in the news' card while scrolling the image/links

Testing on Samsung-SM-JI20A Galaxy Express 3 (Android 6.0.1) and Wikipedia app 2.6.207-alpha-2017-12-04. Notice in the attached video during scrolling that the Economy of Virginia lead image after appearing in the gray background color container for a bit the image eventually loads, and the image is still loaded upon scrolling back up to it. I didn't scroll down a long way in order to keep the video short, but hopefully this test shows that it is working as expected.

LGTM on Nexus 5 (6.0.1) Wikipedia v2.7.220-alpha-2017-12-08
See video:
https://youtu.be/kkHjmGSflmM

Dbrant claimed this task.