Change Details

=== Steps to Reproduce # Go to https://en.m.wikipedia.org/wiki/Barack_Obama#/media/File%3AObama_Macri_October_2017.jpg # Press the previous button === Expected Results - The gallery gracefully animates preloaded images in Ex: https://mobile.twitter.com/Oniropolis/status/998898880459804672 === Actual Results - The gallery unconditionally shows the spinner then immediately blasts it down with a massive white flare brighter than a thousand suns before begrudgingly and gutturally smashing the image in place: {F22189251} - When the image is initially opened from a page there is a flash of the top of the article right before the image loads. Check out this screen recording (Alex extended the frame where the top of the article flashes): {F22263563} === Environments Observed - enwiki **Browser Version ** - Chromium v66.0.3359.181 **OS Version** - Ubuntu v18.04 64b **Device Model** - Desktop **Device Language** - English

=== Steps to Reproduce # Go to https://en.m.wikipedia.org/wiki/Barack_Obama#/media/File%3AObama_Macri_October_2017.jpg # Press the previous button === Expected Results - The gallery gracefully animates preloaded images in Ex: https://mobile.twitter.com/Oniropolis/status/998898880459804672 === Actual Results - The gallery unconditionally shows the spinner then immediately blasts it down with a massive white flare brighter than a thousand suns before begrudgingly and gutturally smashing the image in place: {F22189251} - When the image is initially opened from a page there is a flash of the top of the article right before the image loads. Check out this screen recording (Alex extended the frame where the top of the article flashes): {F22263563} === Environments Observed - enwiki **Browser Version ** - Chromium v66.0.3359.181 **OS Version** - Ubuntu v18.04 64b **Device Model** - Desktop **Device Language** - English == Developer notes The issue here is the asynchronous nature of the method loadImageOverlay and the synchronous nature of hiding an overlay. Currently the media viewer route when invoked will make an async call to loadModule( 'mobile.mediaViewer' ) which will eventually resolve to an ImageOverlay (read about the JavaScript Eventloop if it's not clear why this is a problem) Code: https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.scripts/init.js#L108 To remedy this we'll want to make the mediaViewer synchronous every time the module has already been loaded e.g. ``` } else if ( mw.loader.getState( 'mobile.mediaViewer' ) === 'ready' ) { return makeOverlay( title ); } else { return loader.loadModule( 'mobile.mediaViewer' ).then( function () { return makeOverlay( title ); } ); } ``` I've verified that this does indeed solve the problem.

=== Steps to Reproduce # Go to https://en.m.wikipedia.org/wiki/Barack_Obama#/media/File%3AObama_Macri_October_2017.jpg # Press the previous button === Expected Results - The gallery gracefully animates preloaded images in Ex: https://mobile.twitter.com/Oniropolis/status/998898880459804672 === Actual Results - The gallery unconditionally shows the spinner then immediately blasts it down with a massive white flare brighter than a thousand suns before begrudgingly and gutturally smashing the image in place: {F22189251} - When the image is initially opened from a page there is a flash of the top of the article right before the image loads. Check out this screen recording (Alex extended the frame where the top of the article flashes): {F22263563} === Environments Observed - enwiki **Browser Version ** - Chromium v66.0.3359.181 **OS Version** - Ubuntu v18.04 64b **Device Model** - Desktop **Device Language** - English == Developer notes The issue here is the asynchronous nature of the method loadImageOverlay and the synchronous nature of hiding an overlay. Currently the media viewer route when invoked will make an async call to loadModule( 'mobile.mediaViewer' ) which will eventually resolve to an ImageOverlay (read about the JavaScript Eventloop if it's not clear why this is a problem) Code: https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.scripts/init.js#L108 To remedy this we'll want to make the mediaViewer synchronous every time the module has already been loaded e.g. ``` } else if ( mw.loader.getState( 'mobile.mediaViewer' ) === 'ready' ) { return makeOverlay( title ); } else { return loader.loadModule( 'mobile.mediaViewer' ).then( function () { return makeOverlay( title ); } ); } ``` I've verified that this does indeed solve the problem.