add animated placeholder to player

src/assets/scss/5-modules/placeholder.scss

@@ -0,0 +1,28 @@
+/* ----------------------------------------------------------- */
+/* == Animated placeholder module */
+/* ----------------------------------------------------------- */
+
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -500px 0;
+  }
+
+  100% {
+    background-position: 500px 0;
+  }
+}
+
+.placeholder {
+  position: relative;
+  min-height: 1em;
+  background: #f2f2f2;
+  background: linear-gradient(to right, #eee 8%, rgb(223, 223, 223) 18%, #eee 33%);
+  background-size: 100rem 10.4rem;
+  color: transparent;
+  animation-name: placeHolderShimmer;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+
+  animation-fill-mode: forwards;
+}

src/assets/scss/5-modules/player-big.scss

@@ -7,6 +7,7 @@
   overflow: hidden;
   padding-bottom: calc(100% / (16/9));
   border-radius: .4rem .4rem 0 0;
+  background-color: #f2f2f2;
 }
 
 .playerBig__player > iframe {

src/assets/scss/5-modules/player-progress.scss

@@ -101,3 +101,7 @@
   color: $color-grey-1;
   font-size: 1.2rem;
 }
+
+.playerProgress__timecodeItem {
+  display: block;
+}

src/assets/scss/5-modules/player-track.scss

@@ -26,6 +26,7 @@
   display: box;
   overflow: hidden;
   margin-bottom: .8rem;
+  width: 100%;
   color: $color-secondary;
   text-overflow: ellipsis;
   font-weight: 600;
@@ -40,6 +41,7 @@
 
 .playerTrack__referer {
   overflow: hidden;
+  width: 100%;
   color: $color-grey-1;
   text-overflow: ellipsis;
   white-space: nowrap;

src/assets/scss/style.scss

@@ -61,6 +61,7 @@
 // == modules */
 // --------------------------------------------------------------
 
+@import "5-modules/placeholder";
 @import "5-modules/player-big";
 @import "5-modules/player-progress";
 @import "5-modules/player-track";

src/components/Radio.svelte

@@ -6,10 +6,8 @@
     <Header></Header>
 
     <section class="viewer">
-        {#if $current}
         <Viewer></Viewer>
         <Controls></Controls>
-        {/if}
     </section>
 
     <section class="queue">

src/components/Viewer.svelte

@@ -1,5 +1,6 @@
 <div class="playerBig">
-    <div class="playerBig__player">
+    <div class="playerBig__player" class:placeholder={!ready}>
+        {#if $current}
         <YoutubePlayer
             id={$current ? $current.media.credentials.id : null}
             class="playerBig__iframe"
@@ -13,30 +14,27 @@
             bind:duration
             bind:seek={seek}
         ></YoutubePlayer>
-
+        {/if}
         <div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
         <button class="playerBig__reduce">Reduce<IconReduce></IconReduce></button>
     </div>
 
-    {#if !ready}
-        LOADING TRACK
-    {/if}
-
     <Progress
         duration={duration}
         currentTime={currentTime}
+        ready={ready}
         on:input={event => updateCurrentTime(event.target.value, false)}
         on:change={event => updateCurrentTime(event.target.value, true)}
     ></Progress>
 
     <div class="playerTrack">
         <div class="playerTrack__infos">
-            <div class="playerTrack__name">{$current.title}</div>
+            <div class="playerTrack__name" class:placeholder={!$current}>{#if $current}{$current.title}{/if}</div>
-            <div class="playerTrack__referer">
+            <div class="playerTrack__referer" class:placeholder={!$current}>
-                share by <span class="playerTrack__username">{$current.referer.username}</span>
+                {#if $current}shared by <span class="playerTrack__username">{$current.referer.username}</span>{/if}
             </div>
         </div>
-        <button class="playerTrack__fav" aria-label="Fav"><IconHeart></IconHeart></button>
+        <button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>
     </div>
 </div>
 

src/components/player/Progress.svelte

@@ -14,8 +14,8 @@
         >
     </div>
     <div class="playerProgress__timecode">
-        <div class="playerProgress__timecodeItem">{currentTimeText}</div>
+        <div class="playerProgress__timecodeItem" class:placeholder={!ready}>{currentTimeText}</div>
-        <div class="playerProgress__timecodeItem">{durationText}</div>
+        <div class="playerProgress__timecodeItem" class:placeholder={!ready}>{durationText}</div>
     </div>
 </div>
 <script>
@@ -23,6 +23,7 @@
 
     export let duration
     export let currentTime
+    export let ready
 
     $: value = currentTime != null ? currentTime : 0
     $: max = duration != null ? duration : 100