From ad365fad7a4a53768e7465597cd08a009c1fdc29 Mon Sep 17 00:00:00 2001 From: David Battersby Date: Fri, 14 Jul 2023 14:02:06 +0800 Subject: [PATCH] FIX: lightbox setup blocked due to waiting for first image load (#22612) The Problem Clicking on a large image opens lightbox, however the new lightbox currently waits for the first image to finish loading before it finishes loading the lightbox UI correctly (ie. background color). This makes the visual experience feel broken. Because open() is waiting for the image to load, it doesn't trigger the onOpen callback, which appends a .has-lightbox class to the html tag. The lightbox background color requires that css class to be set for the styles to be applied correctly. The Solution This PR prevents blocking when loading loading the first image (image that was clicked) within the lightbox, and therefore allows the css class to be appended to the html tag correctly and as a result fixing the styling issues. The #setCurrentItem function is async and awaits the loading of preloadItemImages already, so the image will load correctly when complete despite the rest of the UI loading in advance. --- app/assets/javascripts/discourse/app/components/d-lightbox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/d-lightbox.js b/app/assets/javascripts/discourse/app/components/d-lightbox.js index 15c7cc0d106..a35d034138f 100644 --- a/app/assets/javascripts/discourse/app/components/d-lightbox.js +++ b/app/assets/javascripts/discourse/app/components/d-lightbox.js @@ -192,7 +192,7 @@ export default class DLightbox extends Component { } @bind - async open({ items, startingIndex, callbacks, options }) { + open({ items, startingIndex, callbacks, options }) { this.options = options; this.items = items; @@ -202,7 +202,7 @@ export default class DLightbox extends Component { this.isLoading = true; this.isVisible = true; - await this.#setCurrentItem(this.currentIndex); + this.#setCurrentItem(this.currentIndex); if ( this.options.zoomOnOpen &&