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

@@ -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 {

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} />