diff --git a/src/views/CatalogArtist.svelte b/src/views/CatalogArtist.svelte
index ac404c9..d61b15e 100644
--- a/src/views/CatalogArtist.svelte
+++ b/src/views/CatalogArtist.svelte
@@ -3423,14 +3423,6 @@
single pixel of content. It must NOT live in .fade-flow with the
rest of the body: that carries a transform and sits inside the
clipped .fade-frame, which would both re-anchor and mask it. -->
- {#if page.art_preview}
-
-
- {page.albums.length || popularTracks.length
- ? "Refining release details"
- : "Loading songs and releases"}
-
- {/if}
+
+
+
+ {page.albums.length || popularTracks.length
+ ? "Refining release details"
+ : "Loading songs and releases"}
+
+
{/if}
{/if}
@@ -6259,61 +6267,35 @@
contain-intrinsic-size: auto 360px;
}
- /* Transient load status, pinned to the pane's top-right and out of flow.
- It shares the top band with the sticky .results-head (z-index 40), which
- is why this has to clear 40 rather than merely clearing .scrollbody's 3 —
- at any lower value the bar paints straight over it and the pill is
- invisible with no other symptom. */
- .stage-pill {
- position: absolute;
- top: 16px;
- right: 20px;
- z-index: 41;
- display: inline-flex;
- align-items: center;
- gap: 9px;
- height: 30px;
- padding: 0 14px;
- border-radius: 15px;
- background: rgba(14, 14, 16, 0.72);
- border: 1px solid rgba(255, 255, 255, 0.1);
- box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
- backdrop-filter: blur(14px);
- color: var(--text-secondary);
- font-size: 12px;
- font-weight: 500;
- white-space: nowrap;
+ /* Load status wearing the stat chip's own metrics — it stands in for those
+ chips while they resolve, so it must measure exactly like them or the row
+ changes height as it hands over. Inherits .chip for everything but the
+ spinner and the slightly softer label colour. */
+ .stage-chip {
+ gap: 8px;
+ color: rgba(255, 255, 255, 0.62);
pointer-events: none;
- animation: stage-pill-in 180ms ease-out;
}
- .stage-pill .ring {
+ .stage-chip .ring {
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid var(--accent);
border-right-color: transparent;
- animation: stage-pill-spin 0.9s linear infinite;
+ animation: stage-chip-spin 0.9s linear infinite;
}
- @keyframes stage-pill-spin {
+ @keyframes stage-chip-spin {
to {
transform: rotate(360deg);
}
}
- @keyframes stage-pill-in {
- from {
- opacity: 0;
- transform: translateY(-4px);
- }
- }
-
/* The spinner is decoration; honour a reduced-motion preference by holding
it still rather than removing the only signal that work is happening. */
@media (prefers-reduced-motion: reduce) {
- .stage-pill,
- .stage-pill .ring {
+ .stage-chip .ring {
animation: none;
}
}