polybjorn 1ff27fea21 fix(themes): replace #load_more loading-state GIF with a CSS spinner (#8804) ...

* fix(themes): replace #load_more loading-state GIF with a CSS spinner

In its `.loading` state, the "Load more" button kept its `.btn` frame and the spinner inside was hard to see or invisible across themes. Replaces the GIF with a base-theme CSS spinner inheriting `currentColor`, drops the button frame, respects `prefers-reduced-motion`, and renders crisply at any DPI. Per-theme `#load_more.loading` overrides in Nord, Flat, Mapco, Ansum and Swage become redundant and are removed; a now-redundant `font-size: 0` rule in `base.css` is also dropped.

* fix(themes): use border-rotation spinner for older-browser compat

Replaces conic-gradient + mask + aspect-ratio (Firefox 83+, Safari 15.4+) with border + rotate, supported in Gecko since Firefox 16 (2012) and Blink/WebKit since 2015. Visual difference: a ring with a rotating gap instead of a tapered arc. currentColor inheritance and prefers-reduced-motion handling are preserved.

* fix(themes): regenerate RTL spinner stylesheet

rtlcss flips border-right-color to border-left-color for RTL; the manual port of the spinner block missed it. Regenerated via npm run rtlcss.

Reworked the spinner with border + rotate instead of conic-gradient + mask + aspect-ratio. 

<img width="35" height="36" alt="Screenshot 2026-05-11 at 11 05 43" src="https://github.com/user-attachments/assets/e065efc9-9d6c-4369-8390-f0e89db81952" />

Oldest browser versions still supported: Firefox 16 (2012), SeaMonkey 2.13 (2012), Chrome 43 (2015), Safari 9 (2015), Edge 12 (2015). Below those, `@keyframes` and `animation` would need `-webkit-` fallbacks.

Verified now working in SeaMonkey 2.53.23. Couldn't test feed clicks or page reload there because login itself hits a separate cookie issue.
---------

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>

2026-05-11 16:30:08 +02:00

4.7 KiB

Raw Permalink Blame History

View Raw