dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Fix a bug transitioning between two loading states in item page preview

Browse source
This commit is contained in:
Emi Matchu 2024-07-07 21:52:38 -07:00
parent 059644f847
commit d18f43d769
1 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/outfit-viewer.js
View file

@ -4,6 +4,15 @@ class OutfitLayer extends HTMLElement {
constructor() {
super();
this.#internals = this.attachInternals();
// An <outfit-layer> starts in the loading state, and then might very
// quickly decide it's not after `#connectToChildren`. This is to prevent a
// flash of *non*-loading state, when a new layer loads in. (e.g. In the
// time between our parent <turbo-frame> loading, which shows the loading
// spinner; and us being marked `:state(loading)`, which shows the loading
// spinner; we don't want the loading spinner to do its usual *immediate*
// total fade-out; then have to fade back in again, on the usual delay.)
this.#setStatus("loading");
}
connectedCallback() {
@ -27,9 +36,7 @@ class OutfitLayer extends HTMLElement {
window.addEventListener("message", (m) => this.#onMessage(m));
this.#setStatus("loading");
} else {
throw new Error(
`<outfit-layer> must contain an <img> or <iframe> tag`,
);
throw new Error(`<outfit-layer> must contain an <img> or <iframe> tag`);
}
}
@ -38,10 +45,7 @@ class OutfitLayer extends HTMLElement {
return;
}
if (
data.type === "status" &&
["loaded", "error"].includes(data.status)
) {
if (data.type === "status" && ["loaded", "error"].includes(data.status)) {
this.#setStatus(data.status);
} else {
throw new Error(