Page MenuHomePhabricator

Lazy loading code should not run on talk pages (currently not showing any images in overlays)
Closed, ResolvedPublic3 Estimated Story Points

Description

Go to https://en.m.wikipedia.org/w/index.php?title=User_talk:John_Vandenberg&oldid=930478870

Click on a title of a section that includes images, for example "Orphaned non-free image File:Uc-logo.png" or "Invitation".

The images don't appear. I only see gray rectangles. This happens in English Wikipedia and Hebrew Wikipedia, in Chrome and in Firefox.

Developer notes

The lazy load code likely doesn't need to run on talk.. So we could check namespace and disable that transform on talk pages.
Alternatively, a client side change to trigger the loading of images when an overlay is opened will do the job.

QA Results - Beta

ACStatusDetails
1T252025#6366263

QA Results - Prod

ACStatusDetails
1T252025#6390043

Event Timeline

Jdlrobson renamed this task from Talk pages on MobileFrontend don't show any images to Lazy loading code should not run on talk pages (currently not showing any images in overlays).May 7 2020, 11:21 PM
Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson updated the task description. (Show Details)
Jdlrobson triaged this task as Medium priority.
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
ovasileva added a subscriber: ovasileva.

@ovasileva, @Jdlrobson

Lazy loading works good enough for any content including provided example. I don't see any technical reason why it shouldn't work on talk pages. See example of loading images with poor connection.

Change 618048 had a related patch set uploaded (by Peter.ovchyn; owner: Peter.ovchyn):
[mediawiki/extensions/MobileFrontend@master] Use NoTransform instead of LazyImageTransform if page is Talk.

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

@Peter.ovchyn the issue is the images are not showing in the JavaScript overlay. Try clicking Invitation on https://en.m.wikipedia.org/w/index.php?title=User_talk:John_Vandenberg

Now I think about it, I think a better solution would be to call in src/mobile.talk.overlays/TalkSectionOverlay.js
How's your JS? :)

var lazyImages = require('mobile.startup').lazyImages
lazyImages.lazyImageLoader.loadImages(
  lazyImages.queryPlaceholders ( this.$el[0] )
)

@Peter.ovchyn the issue is the images are not showing in the JavaScript overlay. Try clicking Invitation on https://en.m.wikipedia.org/w/index.php?title=User_talk:John_Vandenberg

What do you mean by JavaScript overlay. Animation effect?

Change 618285 had a related patch set uploaded (by Peter.ovchyn; owner: Peter.ovchyn):
[mediawiki/extensions/MobileFrontend@master] Force loading all lazy images on TalkSectionOverlay

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

Change 618048 abandoned by Peter.ovchyn:
[mediawiki/extensions/MobileFrontend@master] Use NoTransform instead of LazyImageTransform if page is Talk.

Reason:
See T252025#6357272

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

Change 618285 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Force loading all lazy images on TalkSectionOverlay

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

ovasileva set the point value for this task to 3.Aug 4 2020, 5:28 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA steps

Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Talk:Conflict-title-0.4588026768744695-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n

Click on a title of a section that includes images, for example "Orphaned non-free image File:Uc-logo.png" or "Invitation".

✅ AC1: The image should appear, not just gray rectangles.

Aug-06-2020 09-30-33.gif (846×528 px, 1 MB)

Edtadros removed Edtadros as the assignee of this task.EditedAug 17 2020, 5:04 PM
Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: euwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA steps

Go to https://eu.m.wikipedia.org/wiki/Film_(zinema)

Click on a title of a section that includes images, for example "Orphaned non-free image File:Uc-logo.png" or "Invitation".

✅ AC1: The image should appear, not just gray rectangles.

Aug-17-2020 10-05-50.gif (1×640 px, 1 MB)

Reviewed QA results - all looks good. Resolving!