2.3 - Adding loading effect for feed list

Author: quead

src/app/app.component.html

@@ -12,7 +12,9 @@ <h1><span class="favicon-app"></span>YouTube Player v2.0</h1>
           <button id="linux-maximize" (click)="winClose();"></button>
       </div>
   </div>
-  <button *ngIf="!_shared.isLogged" type="button" (click)="loginGoogle()">Login</button>
+  <ng-container *ngIf="!_shared.isLogged">
+    <button type="button" (click)="loginGoogle()">Login</button>
+  </ng-container>
   <ng-container *ngIf="_shared.isLogged">
     <button type="button" (click)="logout()">Logout</button>
   </ng-container>

src/app/app.component.ts

@@ -142,7 +142,7 @@ export class AppComponent implements OnInit {
         this.setDefaultPlayer();
       }
     });
-    this.setSettings(); 
+    this.setSettings();
   }
 
   // ---------------- Init player ----------------

src/app/components/category/category.component.html

@@ -1,10 +1,29 @@
 <ng-container *ngIf="loading">
-    <div class="loading-app">
-        <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
-        <span class="sr-only">Loading...</span>
+  <div class="video-list-featured loading-featured">
+      <div class="video-item">
+        <div class="video-item-info">
+          <div class="video-item-image"></div>
+        </div>
+      </div>
+  </div>
+  <div class="categories">
+    <ng-container *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
+      <div id="category-{{i}}">
+        <span class="trigger loading-featured"></span>
+      </div>
+    </ng-container>
+  </div>
+  <div class="feed-video-list grid-list loading-list">
+    <div *ngFor="let i of [1,2,3,4]" class="video-item loading-featured-video-item">
+      <div class="video-item-info">
+        <div class="video-item-image"></div>
+        <div class="video-item-content">
+        </div>
+      </div>
     </div>
+  </div>
 </ng-container>
-<ng-container *ngIf="feedVideos">
+<ng-container *ngIf="feedVideos && !loading">
   <div [ngStyle]="{'background-image': 'url(' + trendingFirst.bannerURL + ')'}" class="video-list-featured">
       <div class="video-item" [attr.data-index]="0">
         <div class="video-item-info">
@@ -31,13 +50,9 @@
           </button>
         </div>
       </div>
-      <!--
-      <p>{{ trendingFirst.stats.subscribers | number:'1.0' }}</p>
-      <p>{{ trendingFirst.stats.views | number:'1.0' }}</p>
-      <p>{{ trendingFirst.stats.videoCount | number:'1.0' }}</p>-->
   </div>
 </ng-container>
-<div class="categories" *ngIf="categories">
+<div class="categories" *ngIf="categories && !loading">
   <ng-container *ngFor="let category of categories.items">
     <div *ngIf="category.id === currentCategory">
       <button type="button" (click)="resetCategories()" class="trigger back">
@@ -46,7 +61,6 @@
       </button>
     </div>
     <div *ngIf="category.snippet.assignable && categoriesBlocked.indexOf(category.id) === -1 && category.id !== currentCategory" id="category-{{category.id}}">
-      <!-- (click)="getCategoriesVideos(category.id)" -->
       <a routerLink="/category/{{category.id}}" class="trigger">
         <span class="tooltip">{{category.snippet.title}}</span>
         <ng-container *ngIf="category.snippet.title === 'Film & Animation'">
@@ -83,7 +97,7 @@
     </div>
   </ng-container>
 </div>
-<div id="feed-video-list" class="video-list" [ngClass]="{'grid-list': !listGrid }">
+<div *ngIf="!loading" class="feed-video-list video-list" [ngClass]="{'grid-list': !listGrid }">
   <div *ngFor="let feedVideo of feedVideos; let i = index" [ngClass]="{'hidden-thumbnails': !thumbnails }" [attr.data-index]="i" class="video-item">
     <div class="video-item-info">
       <div *ngIf="thumbnails" class="video-item-image" [ngStyle]="{'background-image': 'url(' + feedVideo.snippet.thumbnails.medium.url +')'}"></div>

src/assets/scss/_loading.scss

@@ -0,0 +1,39 @@
+@keyframes placeHolderShimmer {
+    0% {
+        background-position: -800px 0;
+    }
+    100% {
+        background-position: 800px 0;
+    }
+}
+
+.loading-featured {
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeHolderShimmer;
+    animation-timing-function: linear;
+    background: linear-gradient(to right,rgba(0,0,0,0.6) 8%,var(--c-base) 18%,rgba(0,0,0,0.6) 33%);
+    background-size: 800px 104px;
+    &-video-item {
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        animation-iteration-count: infinite;
+        animation-name: placeHolderShimmer;
+        animation-timing-function: linear;
+        background: linear-gradient(to right,rgba(0,0,0,0.6) 8%,var(--c-base) 18%,rgba(0,0,0,0.6) 33%);
+        background-size: 800px 104px;
+        height: 180px;
+        .video-item-image {
+            display: none;
+        }
+    }
+    &:before {
+        display: none;
+    }
+}
+
+.loading-list {
+    width: 100%;
+    height: 100%;
+}

src/assets/scss/_responsive.scss

@@ -40,7 +40,7 @@
     #app-container {
         height: calc(100% - 45px);
     }
-    #feed-video-list {
+    .feed-video-list {
         width: calc(100% - 20px);
     }
 
@@ -68,7 +68,7 @@
         }
     }
 
-    #feed-video-list {
+    .feed-video-list {
         &::-webkit-scrollbar {
             width: 8px;
         }
@@ -164,7 +164,7 @@
         }
     }
 
-    #feed-video-list {
+    .feed-video-list {
         position: relative;
         width: 100%;
     }

src/assets/scss/_videos.scss

@@ -413,7 +413,7 @@ iframe {
     }
 }
 
-#feed-video-list {
+.feed-video-list {
     top: inherit;
     bottom: 0;
     height: calc(100% - 270px);

src/assets/scss/main.scss

@@ -20,4 +20,5 @@
 }
 
 @import 'responsive';
-@import 'app';
+@import 'app';
+@import 'loading';

src/assets/scss/theme/light.scss

@@ -78,15 +78,15 @@ nav {
     }
 }
 
-#feed-video-list {
+.feed-video-list {
     &.grid-list .hidden-thumbnails {
         .video-item-info {
             background-color: rgba(0, 0, 0, 0.8);
         }
     }
 }
 
-#feed-video-list,
+.feed-video-list,
 #related-video-list {
     .video-item {
         background-color: var(--c-soft-gray);
@@ -156,7 +156,7 @@ nav {
     color: rgba(255, 255, 255, 0.6);
 }
 
-#feed-video-list {
+.feed-video-list {
     background-color: var(--c-white);
     &.grid-list {
         .video-item {