improvements to home page, added .spinner

src/renderer/style.less

@@ -542,6 +542,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   margin: 0px;
 }
 
+.spinner {
+  background-image: url("assets/spinner.gif");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 32px;
+  height: 32px;
+  display: inline-block;
+}
+
 .app-sidebar-content::-webkit-scrollbar {
   display: none;
 }
@@ -815,7 +825,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   }
 
   &.song-artist-marquee {
-    >marquee {
+    > marquee {
       //margin-bottom: -3px;
     }
   }
@@ -844,8 +854,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   .song-artist-normal {
     height: inherit;
   }
+
   &.song-artist-marquee {
-    >marquee {
+    > marquee {
       margin-bottom: -3px;
     }
   }
@@ -2111,9 +2122,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   .friends-info {
     display: flex;
     flex-flow: column;
+
     .badge-container {
       display: flex;
       flex-flow: wrap;
+
       .socialBadge {
         width: 40px;
         height: 40px;
@@ -2128,6 +2141,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         }
       }
     }
+
     .friends-name {
       text-align: center;
       font-size: 0.9em;
@@ -2978,6 +2992,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     .badge-container {
       transition: opacity 0.1s var(--appleEase);
       opacity: 1;
+
       .socialBadge {
         width: 32px;
         height: 32px;
@@ -3024,6 +3039,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       > .badge-container {
         opacity: 0;
       }
+
       > .play-btn,
       > .menu-btn {
         opacity: 1;

src/renderer/views/components/mediaitem-list-item.ejs

@@ -87,7 +87,6 @@
         },
         mounted() {
             let duration = this.item.attributes.durationInMillis ?? 0
-            console.log(duration)
             if(duration == 0 || !this.showDuration) {
                 this.displayDuration = false
             }

src/renderer/views/pages/artist-feed.ejs

@@ -13,7 +13,7 @@
                             <mediaitem-list-item v-for="item in artistFeed" :item="item"></mediaitem-list-item>
                         </template>
                         <template v-else>
-                            <div class="hint-text">No new activity from followed artists</div>
+                            <div class="spinner"></div>
                         </template>
                     </div>
                 </div>

src/renderer/views/pages/cider-playlist.ejs

@@ -2,7 +2,9 @@
     <div class="content-inner playlist-page" v-if="data != [] && data.attributes != null"
          :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
         <template v-if="app.playlists.loadingState == 0">
-            <div class="content-inner centered">Loading...</div>
+            <div class="content-inner centered">
+                <div class="spinner"></div>
+            </div>
         </template>
         <template v-if="app.playlists.loadingState == 1">
             <div class="playlist-display row"

src/renderer/views/pages/home.ejs

@@ -6,17 +6,24 @@
                     <h3>Home</h3>
                     <div class="well profile-well">
                         <div class="user-icon">
-                            <mediaitem-artwork shadow="none" :url="(profile && profile.attributes && profile.attributes.artwork) ? profile.attributes.artwork.url : ''"
+                            <mediaitem-artwork shadow="none"
+                                               :url="(profile && profile.attributes && profile.attributes.artwork) ? profile.attributes.artwork.url : ''"
                                                size="300"></mediaitem-artwork>
                         </div>
-                        <h3 class="name" >{{ (profile && profile.attributes && profile.attributes.name) ? profile.attributes.name : "" }}</h3>
+                        <h3 class="name">{{ (profile && profile.attributes && profile.attributes.name) ?
-                        <h4 class="handle">@{{ (profile && profile.attributes && profile.attributes.handle) ? profile.attributes.handle : "" }}</h4>
+                            profile.attributes.name : "" }}</h3>
+                        <h4 class="handle">@{{ (profile && profile.attributes && profile.attributes.handle) ?
+                            profile.attributes.handle : "" }}</h4>
                     </div>
                 </div>
                 <div class="col">
                     <h3>Recently Played</h3>
                     <div class="well">
-                        <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
+                        <template v-if="isSectionReady('recentlyPlayed')">
+                            <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)"
+                                                 :item="item"></mediaitem-list-item>
+                        </template>
+                        <div class="spinner" v-else></div>
                     </div>
                 </div>
             </div>
@@ -36,7 +43,10 @@
                 <div class="col madeforyou-col">
                     <h3>Made For You</h3>
                     <div class="well">
-                        <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
+                        <template v-if="isSectionReady('madeForYou')">
+                            <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
+                        </template>
+                        <div class="spinner" v-else></div>
                     </div>
                 </div>
                 <div class="col">
@@ -53,7 +63,7 @@
                             <mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
                         </template>
                         <template v-else>
-                            <div class="hint-text">No new activity from followed artists</div>
+                            <div class="spinner"></div>
                         </template>
                     </div>
                 </div>
@@ -62,8 +72,11 @@
                 <div class="col">
                     <h3>Friends Listening To</h3>
                     <div class="well">
-                        <mediaitem-square kind="small" v-for="item in friendsListeningTo"
+                        <template v-if="isSectionReady('friendsListeningTo')">
-                                          :item="item"></mediaitem-square>
+                            <mediaitem-square kind="small" v-for="item in friendsListeningTo"
+                                              :item="item"></mediaitem-square>
+                        </template>
+                        <div class="spinner" v-else></div>
                     </div>
                 </div>
             </div>
@@ -89,6 +102,7 @@
                 artistFeed: [],
                 showingArtistFeed: false,
                 page: "main",
+                sectionsReady: []
             }
         },
         async mounted() {
@@ -98,6 +112,9 @@
             await this.getFavorites()
         },
         methods: {
+            isSectionReady(section) {
+                return this.sectionsReady.includes(section)
+            },
             removeFavoriteContext() {
                 let self = this
                 return {
@@ -204,6 +221,7 @@
                         })[0].relationships.contents.data
                     } catch (err) {
                     }
+                    self.sectionsReady.push("madeForYou")
 
                     try {
                         self.recentlyPlayed = data.data[1].relationships.contents.data
@@ -215,6 +233,8 @@
                         })[0].relationships.contents.data
                     } catch (err) {
                     }
+                    self.sectionsReady.push("recentlyPlayed")
+                    self.sectionsReady.push("friendsListeningTo")
                 });
 
                 app.mk.api.v3.music("/v1/me/social/profile/").then((response) => {

src/renderer/views/pages/zoo.ejs

@@ -2,6 +2,6 @@
     <div class="content-inner">
         <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
         <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
-        <cider-queue ref="queue"></cider-queue>
+        <div class="spinner"></div>
     </div>
 </template>