Page MenuHomePhabricator

[Bug] Visiting a missing image or connection dropping causes the ImageOverlay to load forever
Closed, ResolvedPublic3 Story Points

Description

Steps to Reproduce

Visit https://en.m.wikipedia.org/wiki/Barack_Obama#/media/File%3APresident_Barack_Osbama.jpg?

The issue also occurs when the user goes offline (see bug report in T196911)

Expected Results

  • An error is shown (??)

Actual Results

  • The spinner spins forever

Environments Observed

  • enwiki

Browser Version

  • Chromium v65.0.3325.181

OS Version

  • Ubuntu v17.10 64b

Device Model

  • Desktop

Device Language

  • English

Acceptance criteira

When this happens we will show an alert icon in place of the image:

Clicking "refresh" should attempt to reload the image (and it may fail again if the issue is unrelated to connection)

The bottom details bar should start out hidden and we should only show it if/when the image successfully loads
if it doesn't load we should keep it hidden (in addition to showing the error response)

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 26 2018, 3:12 PM

My read of ImageOverlay is that it doesn't have any concept of errors. For this reason, this task may be more of a feature request than a bug report and additional design assets and copy may be needed.

Change 428017 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/MobileFrontend@master] Fix: guard against missing property in gallery

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

Jdlrobson added subscribers: alexhollender, Jdlrobson.

@alexhollender how should we deal with this?
We could show an error treatment or just close the overlay. Let me know your thoughts.

Change 428017 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Fix: guard against missing property in gallery

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

alexhollender added a comment.EditedMay 1 2018, 11:17 PM

@Jdlrobson could we add some kind of broken image placeholder?

e.g.

Yes. That would be an option if you provided a suitable asset e.g. sad face or other icon.

In the Page Library, we do a little flashing CSS animation while the image lazily loads. If it fails, it loads as a dark square that can be tapped to retry. Many users will never see lazy loading take place but it's designed assuming that many will. Although I'm sure it can be improved, I wanted to share the implementation used in the native apps in case you hadn't seen it.

Jdlrobson renamed this task from [Bug] Visiting a missing image causes the ImageOverlay to load forever to [Bug] Visiting a missing image or connection dropping causes the ImageOverlay to load forever.Jun 12 2018, 5:03 PM
Jdlrobson updated the task description. (Show Details)

@alexhollender can we prioritise this bug and work out what to do here?

@Jdlrobson in this case would refreshing the browser potentially solve the problem? Otherwise let's do this w/o the "Refresh" part.

Jdlrobson updated the task description. (Show Details)Jun 15 2018, 9:42 PM
Jdlrobson moved this task from Needs Analysis to Triaged but Future on the Readers-Web-Backlog board.

LGTM

in this case would refreshing the browser potentially solve the problem

Not always.. in the case of a broken image, if we automatically did this, the user would get stuck in a forever refreshing page. I think the solution you have here looks good.

Jdlrobson updated the task description. (Show Details)Jun 19 2018, 4:38 PM
ovasileva updated the task description. (Show Details)Jun 19 2018, 4:39 PM
ovasileva added a subscriber: ovasileva.

@alexhollender - a note on the copy - perhaps we could say "There was an error while loading this image"?

ovasileva set the point value for this task to 3.Jun 19 2018, 4:42 PM

a note on the copy - perhaps we could say "There was an error while loading this image"?

@ovasileva sounds good, just updated the mockup

Vvjjkkii renamed this task from [Bug] Visiting a missing image or connection dropping causes the ImageOverlay to load forever to f5daaaaaaa.Jul 1 2018, 1:13 AM
Vvjjkkii raised the priority of this task from Normal to High.
Vvjjkkii removed the point value for this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed subscribers: gerritbot, Aklapper.
Mainframe98 renamed this task from f5daaaaaaa to [Bug] Visiting a missing image or connection dropping causes the ImageOverlay to load forever.Jul 1 2018, 9:15 AM
Mainframe98 lowered the priority of this task from High to Normal.
Mainframe98 set the point value for this task to 3.
Mainframe98 updated the task description. (Show Details)
Mainframe98 added subscribers: gerritbot, Aklapper.
Jdlrobson updated the task description. (Show Details)Jul 9 2018, 4:17 PM
Jdlrobson updated the task description. (Show Details)
nray claimed this task.Jul 12 2018, 3:56 PM
nray moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

Change 446071 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/extensions/MobileFrontend@master] Fix image overlay loading forever WIP

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

nray added a comment.EditedJul 16 2018, 10:03 PM

I noticed while working on this card that there is an additional bug related to this one:

When in a state where the ImageOverlay loads forever either due to missing image or connection problems (e.g. visiting https://en.m.wikipedia.org/wiki/Barack_Obama#/media/File%3APresident_Barack_Osbama.jpg?), if one tries to navigate to the next media or to the previous media by clicking the arrow icons, a JavaScript error occurs and the user is unable to change the image.

It appears this error is coming from the MinervaNeue codebase. Should another card be made for that or should I look into that as part of this card?

@nray - it feels like it's closely related to this card so maybe we can do the work here as well, but let's discuss during standup.

nray added a comment.Jul 19 2018, 7:50 PM

Made a ticket at https://phabricator.wikimedia.org/T199964 to address the unusable details bar at the bottom when there is a failed api response. Regarding the navigation bug that I commented about earlier on this ticket, I am trying to fit that into this card since that one doesn't require more design discussion, and the fix is pretty small.

nray added a comment.EditedJul 24 2018, 6:50 PM

@alexhollender, I'm seeking clarification on the "Refresh" link. Were you expecting that link to reload the entire page (same result as if you clicked refresh button in your browser) or were you expecting the link to only try to reload the image (and the data necessary for the image) without reloading the entire page?

nray reassigned this task from nray to alexhollender.Jul 25 2018, 5:28 PM
nray added a subscriber: nray.

@nray I hadn't considered the difference. Is one of those solutions more likely to result in a successful image load?

@alexhollender both are as likely as one another. The difference however is if we reload the entire page there is a server fetch required for the html which makes the whole process slower...

ok, as long as there is visual feedback for the user that we're retrying/reloading (I assume we'd switch from the error state to the loading wheel (?), which would be sufficient) I think we should go for the lighter reload.

nray claimed this task.Jul 31 2018, 5:37 PM
nray moved this task from Needs More Work to Doing on the Readers-Web-Kanbanana-Board-Old board.

Change 446071 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Fix image overlay loading forever

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

Jdlrobson reassigned this task from nray to alexhollender.Aug 10 2018, 9:15 PM

Please test on reading web staging (http://reading-web-staging.wmflabs.org/) I've loaded the patch there.

@Jdlrobson I can't figure out which image to click on in staging to get the stalled image/refresh flow. I tried http://reading-web-staging.wmflabs.org/wiki/Barack_Obama#/media/File%3APresident_Barack_Osbama.jpg but no luck.

Can you provide a link?

ABorbaWMF added a subscriber: ABorbaWMF.

Looks good to me on staging. I was able to reproduce by going to the main page on staging and selecting the Evita article and then tapping on the first image in the Evita article (movie poster)

ovasileva closed this task as Resolved.Aug 17 2018, 9:51 AM

Looks good to me. Thanks all!

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptSep 13 2018, 6:40 PM