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 resolve / reject handler should execute when a user is on any given slide.
[] The $el closure variable inside the postRender method is removed (let's go back to using (this,$el/self.$el)