Nicolas
939beb6fa9
Every "Chargement..." spot across the app was plain text with no
visual motion - easy to mistake a still-fetching page for a stuck one.
New .spinner in styles/base.css - a plain CSS ring (border +
border-top-color, no image/icon-font asset), sized and vertically
aligned to drop into an existing text node inline instead of needing
a flex-row restructure. prefers-reduced-motion turns the spin off.
New client/src/loading.ts exports one shared LOADING_HINT constant so
every dynamic call site (Album/Artist/Library/Playlist/Series's own
route entry, Home's per-library carousels, a season switch reloading
its episode list, the player's route-level load) renders identical
markup. Shell.html's sidebar library list and Library.html's #grid
placeholder (both static templates, no JS import) got the same
markup pasted directly. Player.html's #loadingNotice (video
buffering) got the spinner too.
Left alone: a couple of static templates' own inert copies of this
same placeholder text (Playlist.html, Series.html) that are always
synchronously overwritten before ever painting - nothing a viewer
could ever actually see differently. Also left alone: the brief
button-label loading states elsewhere ("Ajout...", "Démarrage...") -
a different, smaller UI element, typically resolved within one REST
round trip.
Verified: full typecheck/build on the client (no server changes at
all). Visually confirmed in a real browser that the spinner renders
correctly inline with text and is genuinely animating.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
13 lines
525 B
HTML
13 lines
525 B
HTML
<div class="appShell">
|
|
<aside class="sidebar">
|
|
<div class="sidebarBrand">Watch Party</div>
|
|
<nav class="sidebarNav" id="sidebarNav">
|
|
<a href="#/home" class="navItem">Accueil</a>
|
|
<div class="navSectionLabel">Bibliothèques</div>
|
|
<p class="hint" id="libStatus"><span class="spinner"></span>Chargement...</p>
|
|
</nav>
|
|
<button class="linklike sidebarLogout" id="logout"></button>
|
|
</aside>
|
|
<main id="mainContent" class="mainContent"></main>
|
|
<div id="musicBar" class="musicBar"></div>
|
|
</div>
|