feat: afficher la miniature en placeholder dans le lightbox pendant le chargement

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 20 insertions, 4 deletions

diff --git a/templates/gallery.html b/templates/gallery.html
index 14e43c9..d21b518 100644
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -84,18 +84,34 @@ function uploadFiles(files) {
 }
 
 const photos = [{{range .Photos}}'/g/{{$.Name}}/photo/{{.}}',{{end}}];
+const thumbs = [{{range .Photos}}'/g/{{$.Name}}/{{$.ThumbPrefix}}/{{.}}',{{end}}];
 let currentIndex = -1;
 
 function openLightbox(index) {
 	currentIndex = index;
-	const src = photos[index];
-	document.getElementById('lightbox-img').src = src;
-	document.getElementById('lightbox-download').href = src;
+	const fullSrc = photos[index];
+	const img = document.getElementById('lightbox-img');
+
+	img.src = thumbs[index];
+	img.classList.add('loading');
+
+	const full = new Image();
+	full.onload = () => {
+		if (currentIndex === index) {
+			img.src = fullSrc;
+			img.classList.remove('loading');
+		}
+	};
+	full.src = fullSrc;
+
+	document.getElementById('lightbox-download').href = fullSrc;
 	document.getElementById('lightbox').classList.add('active');
 }
 function closeLightbox() {
 	document.getElementById('lightbox').classList.remove('active');
-	document.getElementById('lightbox-img').src = '';
+	const img = document.getElementById('lightbox-img');
+	img.src = '';
+	img.classList.remove('loading');
 	currentIndex = -1;
 }
 document.addEventListener('keydown', e => {