Add spinner on connect/disconnect

static/app.js

@@ -612,6 +612,7 @@ async function resumeSpotify(button) {
   const { target, account } = button.dataset;
   const who = button.querySelector('span').textContent;
   button.disabled = true;
+  button.classList.add('loading');
   try {
     const data = await api('/api/spotify/resume', { target, account });
     toast(`Resuming ${who}'s Spotify on ${data.device}`, 'ok');
@@ -625,6 +626,7 @@ async function resumeSpotify(button) {
     toast(error.message);
   } finally {
     button.disabled = false;
+    button.classList.remove('loading');
   }
 }
 
@@ -633,6 +635,7 @@ async function disconnectSpotify(button) {
   const who = button.querySelector('span').textContent;
   const room = rooms[target];
   button.disabled = true;
+  button.classList.add('loading');
   try {
     const data = await api('/api/spotify/disconnect', { target, account });
     // The speaker not answering on the LAN is not a failure -- the room
@@ -654,6 +657,7 @@ async function disconnectSpotify(button) {
     toast(error.message);
   } finally {
     button.disabled = false;
+    button.classList.remove('loading');
   }
 }
 

static/panel.css

@@ -283,6 +283,13 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .spotify:disabled { opacity: .5; }
 /* The account playing on this room right now. */
 .spotify[aria-pressed="true"] { border: 2px solid var(--ink); }
+/* While a resume or disconnect is on its way, the logo turns into a
+   spinner. Swapped by a class for the same reason as the transport icons.
+   It ticks round in eight steps, like Font Awesome's own fa-spin-pulse. */
+.spotify .spinner { display: none; }
+.spotify.loading .brand { display: none; }
+.spotify.loading .spinner { display: block; animation: spin 1s steps(8) infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
 
 /* --- source card ------------------------------------------------------ */
 .source-button {