diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 26f5dafb..0d866409 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -58,6 +58,9 @@ body.items-show
         width: 100%
         height: 100%
 
+    &:has(.outfit-layer[data-status="loading"])
+      background: gray
+
   .species-color-picker
     .error-icon
       cursor: help
diff --git a/app/javascript/item-page.js b/app/javascript/item-page.js
index afc9235c..11ce034a 100644
--- a/app/javascript/item-page.js
+++ b/app/javascript/item-page.js
@@ -1,2 +1,32 @@
-// eslint-disable-next-line no-console
-console.log("OwO!");
+// When we load in a new preview, set the status on the images. We use this in
+// our CSS to show a loading state when needed.
+function setImageStatuses() {
+	for (const layer of document.querySelectorAll(".outfit-layer")) {
+		const isLoaded = layer.querySelector("img").complete;
+		layer.setAttribute("data-status", isLoaded ? "loaded" : "loading");
+	}
+}
+document.addEventListener("turbo:frame-render", () => setImageStatuses());
+document.addEventListener("turbo:load", () => setImageStatuses());
+
+// When a preview image loads or fails, update its status. (Note that `load`
+// does not fire for images that were loaded from cache, which is why we need
+// both this and `setImageStatuses` when rendering new images!)
+document.addEventListener(
+	"load",
+	({ target }) => {
+		if (target.matches(".outfit-layer img")) {
+			target.closest(".outfit-layer").setAttribute("data-status", "loaded");
+		}
+	},
+	{ capture: true },
+);
+document.addEventListener(
+	"error",
+	({ target }) => {
+		if (target.matches(".outfit-layer img")) {
+			target.closest(".outfit-layer").setAttribute("data-status", "error");
+		}
+	},
+	{ capture: true },
+);