moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve image loading states on detail pages

Browse source 
Replace "Uploading..." text with animated spinner when uploading via
thumbnail, and show placeholder icon while image loads from server.
This commit is contained in:
Jon Seager 2026-02-10 16:56:27 +00:00
parent b28234b52f
commit 7bacd30854
No known key found for this signature in database
2 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/js/components/image-upload.js
View file

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

20
templates/partials/image_section.html
View file

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