Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
David Battersby 2023-07-14 14:02:06 +08:00 committed by GitHub
parent 24ab2f42b0
commit ad365fad7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/components/d-lightbox.js
View File

@ -192,7 +192,7 @@ export default class DLightbox extends Component {
} }
@bind @bind
async open({ items, startingIndex, callbacks, options }) { open({ items, startingIndex, callbacks, options }) {
this.options = options; this.options = options;
this.items = items; this.items = items;
@ -202,7 +202,7 @@ export default class DLightbox extends Component {
this.isLoading = true; this.isLoading = true;
this.isVisible = true; this.isVisible = true;
await this.#setCurrentItem(this.currentIndex); this.#setCurrentItem(this.currentIndex);
if ( if (
this.options.zoomOnOpen && this.options.zoomOnOpen &&