chore: improve now-playing loading

src/assets/scripts/components/now-playing.js

@@ -1,12 +1,10 @@
 const nowPlayingTemplate = document.createElement('template')
 
 nowPlayingTemplate.innerHTML = `
-  <p class="now-playing client-side">
-    <span class="icon--spin" data-key="loading">
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-loader-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a9 9 0 1 0 9 9" /></svg>
-    </span>
+  <p class="client-side">
+    <span class="text--blurred" data-key="loading">🎧 Album by Artist</span>
     <span>
-      <span data-key="content"></span>
+      <span data-key="content" style="opacity:0"></span>
     </span>
   </p>
 `
@@ -24,18 +22,48 @@ class NowPlaying extends HTMLElement {
 
   async connectedCallback() {
     this.append(this.template);
-    const data = { ...(await this.data), ...this.linkData };
+    const data = { ...(await this.data) };
+    const populateNowPlaying = (component, data, cache) => {
+      component.querySelectorAll("[data-key]").forEach(async (slot) => {
+        const { key } = slot.dataset
+        const value = data[key]
 
-    this.querySelectorAll("[data-key]").forEach(async (slot) => {
-      const { key } = slot.dataset;
-      const value = data[key];
+        if (cache) {
+          if (key === 'loading') {
+            slot.style.opacity = '0'
+            slot.style.display = 'none'
+          } else if (key === 'content') {
+            slot.innerHTML = value
+            slot.style.opacity = '1'
+          }
+        }
 
-      if (key === 'loading') {
-        slot.style.display = 'none'
-      } else if (key === 'content') {
-        slot.innerHTML = value;
-      }
-    })
+        if (!cache) {
+          if (key === 'loading') {
+            slot.classList.add('fade')
+            slot.style.opacity = '0'
+            setTimeout(() => {
+              slot.style.display = 'none'
+            }, 300);
+          } else if (key === 'content') {
+            slot.classList.add('fade')
+            setTimeout(() => {
+              slot.innerHTML = value
+              slot.style.opacity = '1'
+            }, 300);
+          }
+        }
+      })
+    }
+
+    try {
+      const cache = JSON.parse(localStorage.getItem('now-playing'))
+      if (cache) populateNowPlaying(this, cache, true)
+    } catch (e) {}
+    populateNowPlaying(this, data)
+    try {
+      localStorage.setItem('now-playing', JSON.stringify(data))
+    } catch (e) {}
   }
 
   get template() {
@@ -45,10 +73,6 @@ class NowPlaying extends HTMLElement {
   }
 
   get data() {
-    try {
-      const cache = JSON.parse(localStorage.getItem('now-playing'))
-      if (cache) populateNowPlaying(cache)
-    } catch (e) {}
     const data = fetch('/api/now-playing', {
       type: 'json',
     })
@@ -56,9 +80,6 @@ class NowPlaying extends HTMLElement {
       .catch(() => {
         loading.style.display = 'none'
       })
-    try {
-      localStorage.setItem('now-playing', JSON.stringify(data))
-    } catch (e) {}
     return data;
   }
 }

src/assets/styles/components/pagefind.css

@@ -21,6 +21,10 @@
   font-size: var(--font-size-base) !important;
 }
 
+.pagefind-ui__result-excerpt {
+  word-break: break-word !important;
+}
+
 .pagefind-ui__form:before {
   opacity: 1 !important;
   top: calc(19px * var(--pagefind-ui-scale)) !important;
@@ -96,4 +100,4 @@
 .pagefind-ui__button:focus {
   color: var(--color-lightest) !important;
   background-color: var(--accent-color-hover) !important;
-}
+}

src/assets/styles/index.css

@@ -463,6 +463,17 @@ li {
   text-align: center !important;
 }
 
+.text--blurred {
+  color: transparent;
+  text-shadow: 0 0 6px var(--text-color);
+}
+
+.fade {
+  transition-property: opacity;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
 .flex--centered {
   display: flex;
   flex-direction: row;