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

1 files changed, 16 insertions, 0 deletions

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; }