forked from Keelrleek/SoulStream
KeelrLeek
d67df6f55e
"Refining release details…" rendered as a paragraph in the content flow, above the action row. It cost about 32px of layout, so the play button and everything under it visibly jumped up the instant the page finished resolving -- a shift announcing nothing more than that a background stage had ended. It also read as debug output: 12px secondary text and a bullet, in a page that otherwise speaks in pills and chips. It is now an absolutely positioned pill at the pane's top-right with a spinning accent ring. Measured: the play button and the Popular heading sit at identical offsets whether it is showing or not, so appearing and resolving move nothing. Two placement constraints, both found the hard way: - It must NOT live in .fade-flow with the rest of the body. That carries a transform, so the pill would anchor to it rather than the page, and it sits inside the clipped .fade-frame, which would mask it. - z-index has to clear 40, not merely .scrollbody's 3. The sticky .results-head shares this top band, and at any lower value it paints straight over the pill -- which looks exactly like the pill failing to render, with no other symptom. .artist-page was already position:relative, so this introduces no new containing block into a scroll pipeline that is sensitive to exactly that. The pill is pointer-events:none since it is never a target, carries role="status" aria-live="polite" so the stage change is announced rather than silently repainted, and holds the spinner still under prefers-reduced-motion rather than dropping the only sign that work is happening.