✨ (chilled) add loader when loading music

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <img src="@/assets/logo.svg" alt="binôme" />
+    <img class="logo" src="@/assets/logo.svg" alt="binôme" />
     <router-view />
   </div>
 </template>
@@ -11,11 +11,12 @@
 #app {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   min-height: 100vh;
 }
 
-svg {
-  margin: 0.1rem;
+img.logo {
+  margin-top: 1rem;
 }
 </style>

src/assets/loader.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f8efba" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<line x1="12" y1="2" x2="12" y2="6">
+	</line>
+	<line x1="12" y1="18" x2="12" y2="22">
+	</line>
+	<line x1="4.93" y1="4.93" x2="7.76" y2="7.76">
+	</line>
+	<line x1="16.24" y1="16.24" x2="19.07" y2="19.07">
+	</line>
+	<line x1="2" y1="12" x2="6" y2="12">
+	</line>
+	<line x1="18" y1="12" x2="22" y2="12">
+	</line>
+	<line x1="4.93" y1="19.07" x2="7.76" y2="16.24">
+	</line>
+	<line x1="16.24" y1="7.76" x2="19.07" y2="4.93">
+	</line>
+</svg>

src/components/ChilledMusic.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="chilled-music" v-show="false">
+  <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"
@@ -9,6 +11,7 @@
         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>

src/components/ZoneMusic.vue

@@ -2,7 +2,9 @@
   <div class="zone-music plume" v-if="isMusicAvailable">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
-        <span :class="{ selected: !hasMusic, disabled: hasMusic }">focus</span>
+        <span class="focus" :class="{ selected: !hasMusic, disabled: hasMusic }"
+          >focus</span
+        >
         <input
           type="checkbox"
           name="use-music"
@@ -11,10 +13,21 @@
           @change="setHasMusic(!hasMusic)"
           data-pm-checkbox-toggle
         />
-        <span :class="{ selected: hasMusic, disabled: !hasMusic }">chill</span>
+        <span
+          class="chill"
+          :class="{ selected: hasMusic, disabled: !hasMusic }"
+        >
+          chill
+          <ChilledMusic
+            class="chilled-music"
+            v-if="hasMusic"
+            :play="play"
+            @play="play"
+            @pause="pause"
+          />
+        </span>
       </label>
     </div>
-    <ChilledMusic v-if="hasMusic" :play="play" @play="play" @pause="pause" />
   </div>
 </template>
 
@@ -52,7 +65,13 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/styles/variables';
 
+.pm-field {
+  display: flex;
+  justify-content: center;
+}
+
 label[data-pm-holder] {
+  flex: 1;
   display: flex;
   justify-content: center;
   margin: auto;
@@ -63,6 +82,20 @@ label[data-pm-holder] {
     &.selected {
       font-weight: bold;
     }
+    &.focus {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    &.chill {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      .chilled-music {
+        margin-left: 0.5rem;
+      }
+    }
   }
 }
 .pm-field {

src/styles/app.scss

@@ -54,7 +54,7 @@ a {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease-out;
 }
 .fade-enter,
 .fade-leave-to {