From 8a007be036c5f7922b5c99f17c1fc39a166ec317 Mon Sep 17 00:00:00 2001
From: mrleo1nid <43583385+mrleo1nid@users.noreply.github.com>
Date: Wed, 28 Oct 2026 14:23:19 +0300
Subject: [PATCH] feat(web): show spinner on play button while track is loading

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/web/src/widgets/PlayerBar.module.css | 23 ++++++++++++++++++++++-
 apps/web/src/widgets/PlayerBar.tsx        |  6 +++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/widgets/PlayerBar.module.css b/apps/web/src/widgets/PlayerBar.module.css
index 62a15bb..15d183a 100644
--- a/apps/web/src/widgets/PlayerBar.module.css
+++ b/apps/web/src/widgets/PlayerBar.module.css
@@ -259,7 +259,28 @@ a.source:hover {
 }
 
 .play[aria-busy='true'] {
-  opacity: 0.7;
+  opacity: 0.85;
+}
+
+.playSpinner {
+  width: 22px;
+  height: 22px;
+  border: 3px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: playSpin 0.7s linear infinite;
+}
+
+@keyframes playSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .playSpinner {
+    animation-duration: 2s;
+  }
 }
 
 .progress {
diff --git a/apps/web/src/widgets/PlayerBar.tsx b/apps/web/src/widgets/PlayerBar.tsx
index 35f31ae..595e83f 100644
--- a/apps/web/src/widgets/PlayerBar.tsx
+++ b/apps/web/src/widgets/PlayerBar.tsx
@@ -143,7 +143,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
             aria-busy={st.loading || undefined}
             disabled={locked} onClick={() => player.toggle()}
           >
-            <Icon src={st.playing ? pauseIcon : playIcon} size={28} />
+            {st.loading ? <span className={s.playSpinner} aria-hidden /> : <Icon src={st.playing ? pauseIcon : playIcon} size={28} />}
           </button>
           <button type="button" className={s.icon} aria-label={t('player.next')} disabled={locked} onClick={() => player.next()}>
             <Icon src={nextIcon} size={26} />
@@ -335,8 +335,8 @@ function NowPlayingSheet({
           <button type="button" className={s.icon} aria-label={t('player.prev')} disabled={locked} onClick={() => player.prev()}>
             <Icon src={prevIcon} size={28} />
           </button>
-          <button type="button" className={s.play} aria-label={t(st.playing ? 'player.pause' : 'player.play')} disabled={locked} onClick={() => player.toggle()}>
-            <Icon src={st.playing ? pauseIcon : playIcon} size={32} />
+          <button type="button" className={s.play} aria-label={t(st.playing ? 'player.pause' : 'player.play')} aria-busy={st.loading || undefined} disabled={locked} onClick={() => player.toggle()}>
+            {st.loading ? <span className={s.playSpinner} aria-hidden /> : <Icon src={st.playing ? pauseIcon : playIcon} size={32} />}
           </button>
           <button type="button" className={s.icon} aria-label={t('player.next')} disabled={locked} onClick={() => player.next()}>
             <Icon src={nextIcon} size={28} />