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

@@ -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 {

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"