From 7bacd30854d87d70f630c5aa83d5ab0cbac0e6c7 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Tue, 10 Feb 2026 16:56:27 +0000
Subject: [PATCH] feat: improve image loading states on detail pages

Replace "Uploading..." text with animated spinner when uploading via
thumbnail, and show placeholder icon while image loads from server.
---
 static/js/components/image-upload.js  |  2 +-
 templates/partials/image_section.html | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/static/js/components/image-upload.js b/static/js/components/image-upload.js
index 27829f2..2326d50 100644
--- a/static/js/components/image-upload.js
+++ b/static/js/components/image-upload.js
@@ -79,7 +79,7 @@ customElements.define(
 
       if (!isReplace) {
         this.innerHTML =
-          '<span class="text-sm text-text-muted">Uploading...</span>';
+          '<svg class="h-5 w-5 animate-spin text-accent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>';
       }
 
       try {
diff --git a/templates/partials/image_section.html b/templates/partials/image_section.html
index c0ad3ad..5b972c4 100644
--- a/templates/partials/image_section.html
+++ b/templates/partials/image_section.html
@@ -21,10 +21,28 @@
       class="relative shrink-0 h-14 w-14 md:h-20 md:w-20 rounded-lg overflow-hidden cursor-pointer"
       onclick="openImageModal('{{ url }}')"
     >
+      <div
+        class="absolute inset-0 flex items-center justify-center border-2 border-dashed border-text-muted/30 rounded-lg text-text-muted"
+      >
+        <svg
+          class="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="1.5"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"
+          />
+        </svg>
+      </div>
       <img
         src="{{ url }}"
-        class="h-full w-full object-cover"
+        class="relative h-full w-full object-cover"
         alt="{{ entity_type }} image"
+        onload="this.previousElementSibling.hidden = true"
       />
       <div
         class="absolute inset-0 pointer-events-none"