Add loading skeletons for search results

Replace bare 'Searching…' text with 8 animated skeleton cards that
mirror the real card layout (thumbnail, title, channel, menu dot).
Shimmer animation sweeps across placeholder blocks until results arrive.

Files:
- frontend/app.js: showSearchSkeletons() function, wired into search submit
- frontend/styles.css: .skeleton-card, .skeleton-shimmer, .skeleton-line, .skeleton-dot styles with shimmer animation
This commit is contained in:
Jonathan Sykes
2026-06-14 14:14:05 +08:00
parent 460aaae234
commit da2ad27244
6 changed files with 68 additions and 4 deletions

View File

@@ -16,7 +16,7 @@ bottom as they come up.
## UX / polish
- [x] Empty-state designs for empty playlists and empty history (match the new hero).
- [ ] Loading skeletons for search results instead of a bare "Searching…".
- [x] Loading skeletons for search results instead of a bare "Searching…".
- [ ] Keyboard-shortcut help overlay (press `?`), listing space / arrows / f / m.
- [ ] Download/preload progress indicator on cards (percent or a bar, not just a pulse).
- [ ] Remember and restore the last playback position per video.