Fix a bug transitioning between two loading states in item page preview
This commit is contained in:
parent
059644f847
commit
d18f43d769
1 changed files with 11 additions and 7 deletions
|
@ -4,6 +4,15 @@ class OutfitLayer extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.#internals = this.attachInternals();
|
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() {
|
connectedCallback() {
|
||||||
|
@ -27,9 +36,7 @@ class OutfitLayer extends HTMLElement {
|
||||||
window.addEventListener("message", (m) => this.#onMessage(m));
|
window.addEventListener("message", (m) => this.#onMessage(m));
|
||||||
this.#setStatus("loading");
|
this.#setStatus("loading");
|
||||||
} else {
|
} else {
|
||||||
throw new Error(
|
throw new Error(`<outfit-layer> must contain an <img> or <iframe> tag`);
|
||||||
`<outfit-layer> must contain an <img> or <iframe> tag`,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,10 +45,7 @@ class OutfitLayer extends HTMLElement {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (data.type === "status" && ["loaded", "error"].includes(data.status)) {
|
||||||
data.type === "status" &&
|
|
||||||
["loaded", "error"].includes(data.status)
|
|
||||||
) {
|
|
||||||
this.#setStatus(data.status);
|
this.#setStatus(data.status);
|
||||||
} else {
|
} else {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
|
|
Loading…
Reference in a new issue