As part of T216198, ImageCarousel.js was refactored to [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/ae5579c8a6eddce532a16e2a4f5355c4d31722d5/src/mobile.mediaViewer/ImageCarousel.js#L88-L102 | 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).
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 (and not ideal) attempt was made to correct this by [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/ae5579c8a6eddce532a16e2a4f5355c4d31722d5/src/mobile.mediaViewer/ImageCarousel.js#L173 | creating a closure variable that referenced the current instance's $el element ]] and [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/ae5579c8a6eddce532a16e2a4f5355c4d31722d5/src/mobile.mediaViewer/ImageCarousel.js#L251 | using this reference when the promise resolves or rejects to perform DOM manipulations. ]] One of the reasons this is bad is because when the promise resolves, it also [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/ae5579c8a6eddce532a16e2a4f5355c4d31722d5/src/mobile.mediaViewer/ImageCarousel.js#L223-L225 | sets instance variables ]] so we could potentially be overwriting instance variables with incorrect info if multiple promises resolve while on the same slide.
We should probably fix this by making a cancelable promise and canceling the promise with each onSlide in a way that the logic inside the resolve/reject handlers doesn't get a chance to run.
== Acceptance criteria
[] Only one imageGateway.getThumb resolve / reject handler should execute when a user is on any given slide. i.e. if user quickly advances slides and then stops, only one image should appear and not multiple (which could happen if the multiple resolve handlers executed)
[] The $el closure variable inside the postRender method is removed (let's go back to using (this,$el/self.$el)
== Developer Notes
Working patch at https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/498998/ . Feel free to modify or discard