From e0663c2f0681662fb599bbf0ac0d45ab8385aa79 Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Wed, 5 Aug 2026 09:19:53 +0100
Subject: preview loading/blank state: hide old thumb instantly while new
 loads, 1s spinner fallback; keep preview hidden until scroll or mouse move,
 reset after click/keyboard navigation

---
 public/app.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

(limited to 'public/app.css')

diff --git a/public/app.css b/public/app.css
index fd7612e..1e51b9b 100644
--- a/public/app.css
+++ b/public/app.css
@@ -58,6 +58,7 @@ html, body {
   transition: opacity .15s;
 }
 .preview.hot { opacity: .85; }
+.preview.hidden { visibility: hidden; }
 .preview img {
   width: 100%;
   height: 100%;
@@ -65,6 +66,21 @@ html, body {
   display: block;
   border-radius: 6px;
 }
+.preview.loading img { visibility: hidden; }
+.preview .spinner {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(255, 255, 255, .25);
+  border-top-color: rgba(125, 211, 252, .9);
+  border-radius: 50%;
+  animation: spin .8s linear infinite;
+  display: none;
+}
+.preview.slow .spinner { display: block; }
+@keyframes spin { to { transform: rotate(360deg); } }
 
 @keyframes lock {
   0%   { transform: scale(.2); opacity: 0; }
-- 
cgit v1.3.1