✨ (chilled) add loader when loading music

src/components/ChilledMusic.vue

@@ -1,14 +1,17 @@
 <template>
-  <div class="chilled-music" v-show="false">
-    <div
-      class="chilled-music plyr__video-embed"
-      id="player"
-      allowfullscreen
-      allowtransparency
-      allow="autoplay"
-      data-plyr-provider="youtube"
-      data-plyr-embed-id="5qap5aO4i9A"
-    ></div>
+  <div class="chilled-music">
+    <img v-if="!ready" src="@/assets/loader.svg" alt="loading" />
+    <section v-show="false">
+      <div
+        class="chilled-music plyr__video-embed"
+        id="player"
+        allowfullscreen
+        allowtransparency
+        allow="autoplay"
+        data-plyr-provider="youtube"
+        data-plyr-embed-id="5qap5aO4i9A"
+      ></div>
+    </section>
   </div>
 </template>
 
@@ -20,7 +23,8 @@ import {
   onMounted,
   watchEffect,
   reactive,
-  onUnmounted
+  onUnmounted,
+  ref
 } from '@vue/composition-api'
 
 export default defineComponent({
@@ -32,6 +36,7 @@ export default defineComponent({
     }
   },
   setup(props, { emit }) {
+    const ready = ref(false)
     const chilledcow = reactive<{ video: Plyr | null }>({
       video: null
     })
@@ -48,7 +53,7 @@ export default defineComponent({
       }
     }
 
-    onMounted(() => {
+    const init = () => {
       chilledcow.video = new Plyr('#player', {
         youtube: {
           noCookie: true,
@@ -62,16 +67,21 @@ export default defineComponent({
           options: [240]
         }
       })
+      chilledcow.video.on('error', init)
       chilledcow.video.on('play', onPlay)
       chilledcow.video.on('pause', onPause)
       chilledcow.video.on('ready', () => {
+        ready.value = true
         if (props.play) {
           chilledcow.video?.play()
         }
       })
-    })
+    }
+
+    onMounted(init)
 
     onUnmounted(() => {
+      chilledcow.video?.off('error', init)
       chilledcow.video?.off('play', onPlay)
       chilledcow.video?.off('pause', onPause)
       chilledcow.video?.destroy()
@@ -80,6 +90,25 @@ export default defineComponent({
     watchEffect(() => {
       props.play ? chilledcow.video?.play() : chilledcow.video?.pause()
     })
+
+    return {
+      ready
+    }
   }
 })
 </script>
+
+<style lang="scss" scoped>
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+img {
+  animation: rotating 4s linear infinite;
+}
+</style>