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 {

templates/index.html

@@ -35,7 +35,8 @@
   {% if loop.index0 == split %}{{ host_toggle() }}{% endif %}
   <button class="spotify" data-target="{{ target }}" data-account="{{ account.key }}"
           aria-label="Resume {{ account.label }}'s Spotify" hidden>
-    <svg viewBox="0 0 496 512" aria-hidden="true"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>
+    <svg class="brand" viewBox="0 0 496 512" aria-hidden="true"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>
+    <svg class="spinner" viewBox="0 0 512 512" aria-hidden="true"><path d="M208 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm0 416a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM48 208a48 48 0 1 1 0 96 48 48 0 1 1 0-96zm368 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM75 369.1A48 48 0 1 1 142.9 437 48 48 0 1 1 75 369.1zM75 75A48 48 0 1 1 142.9 142.9 48 48 0 1 1 75 75zM437 369.1A48 48 0 1 1 369.1 437 48 48 0 1 1 437 369.1z"/></svg>
     <span>{{ account.label }}</span>
   </button>
   {% endfor %}