From d18f43d769984e64042015da5e4e9552703f5085 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 7 Jul 2024 21:52:38 -0700
Subject: [PATCH] Fix a bug transitioning between two loading states in item
 page preview

---
 app/assets/javascripts/outfit-viewer.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/outfit-viewer.js b/app/assets/javascripts/outfit-viewer.js
index 5b66edc7..1cc16f0a 100644
--- a/app/assets/javascripts/outfit-viewer.js
+++ b/app/assets/javascripts/outfit-viewer.js
@@ -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(