As part of T216198, ImageCarousel.js was refactored to support advancing its own images when one of the navigation controls is clicked (previously OverlayManager instantiated a new instance of ImageCarousel with each navigation control click). Each time a user clicks one of the navigation controls (arrows) on the carousel, ImageGateway makes a request for the image data (e.g. url to image, license info, etc).

However, this introduced a new problem: If multiple ImageGateway promises happened to resolve while a user is on a slide, multiple images would be inserted into the overlay. A quick fix involving a $el closure variable was made to account for this, but it warrants a better solution.

T219410 proposed making these promises cancelable. However, @Jdrewniak suggested that a better solution might be to instead have ImageGateway make one request for a batch of data of all the page's images. e.g.:

var thumbs = mediaWiki.mobileFrontend.getCurrentPage()._thumbs.map( i => i.options.filename );

new mw.Api().get({
	action: 'query', 
	format: 'json', 
	formatversion: 2, 
	prop: 'imageinfo',
	titles: thumbs,
	iiprop: ['url','extmetadata'],
iiextmetadatafilter: ['LicenseShortName', 'Artist'],
	iiurlwidth: 1920,
	iiurlheight: 1920
})

This could be either be done by ImageCarousel when it instantiates or by injecting this data into ImageCarousel. By doing this, the promise count would be limited to one so the chance of multiple promises resolving on the same slide would be eliminated.

See Jan's research on this at https://docs.google.com/document/d/1so4URfU5z9utBA5tuafIyGSEbGriJJFF6stYHpNgtCk/edit?usp=sharing for more background/info.

Acceptance criteria

• ImageGateway requests a batch of image data. ImageCarousel/ImageGateway no longer make a request for the data of one image on each slide
• After the promise is resolved, each navigation click will start to load the relevant image immediately - no spinner is shown.
• The loadFailMessage is refactored to work with the new batch data request. It currently shows when either the promise rejects or the image fails to load.
• The quick fix $el closure variable inside ImageCarousel.js postRender method is removed (let's go back to using (this,$el/self.$el)