[UX Feature] better new custom loading spinner

[uxdesignerhector]

I've replaced the generic, impersonal loading indicator with a new custom spinner based on the brand logo. This change successfully reinforces brand identity during waiting states, giving the UI a more custom and modern aesthetic.

Changes

• Spinner Component: Swaps the old spinner implementation for a new custom component that utilizes the logo geometry for animation.
• API Compatibility: Maintains all previously exported functions, ensuring a seamless drop-in replacement without breaking existing calls.

Key Improvements

• Design & Identity: Integrates the custom logo and animation (using M3 expressive motion principles) to ensure the brand is consistently represented, even during loading states.
• Graceful Exit: Employs CSS Discrete Transitioning to achieve a fade-out, avoiding abrupt visual cut-offs.

Browser Note

Note

Due to current browser limitations in handling the discrete transition, the fade-out behaviour in Firefox may appear abrupt. However, this is the same user experience behaviour observed with the previously used default spinner.

---

New spinner:

Old spinner for comparison:

Music library example:

Issues
Fixes #4594

edit: replaced old gif ("off center" inner triangle) with new animation gif.

[jellyfin-bot]

Cloudflare Pages deployment

Latest commit	7964637
Status	✅ Deployed!
Preview URL	https://ac49b1c1.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs

[uxdesignerhector]

Solves #4594

[soultaco83]

Surprisingly enough I am really enjoying the new spinner

[Lampan-git]

It looks very good imo. But it looks like the middle part doesn't spin from the middle, so when its upside down its off-center upwards.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[uxdesignerhector]

It looks very good imo. But it looks like the middle part doesn't spin from the middle, so when its upside down its off-center upwards.

You are right. I have increased the geometric centre by 1. point to take into consideration our brain not braining smoothly due to our perception being very finicky. History repeats itself, this is the same as Greek columns bulging in the middle or the Madonna della Pietà holding an very disproportionated and not very anatomic human called Jesus.

Good Catch!

Old spinner:

New spinner: