Add a loader animation when loading the videos list

client/angular/videos/components/list/videos-list.component.html

@@ -4,7 +4,9 @@
 </div>
 
 <div class="videos-miniatures">
-  <div *ngIf="videos.length === 0">There is no video.</div>
+  <my-loader [loading]="loading"></my-loader>
+
+  <div class="col-md-12 no-video" *ngIf="!loading && videos.length === 0">There is no video.</div>
 
   <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
   </my-video-miniature>

client/angular/videos/components/list/videos-list.component.scss

@@ -1,16 +1,3 @@
-.videos-miniatures {
-  min-height: 600px;
-}
-
-my-videos-miniature {
-  display: inline-block;
-}
-
-pagination {
-  display: block;
-  text-align: center;
-}
-
 .videos-info {
 
   padding-bottom: 20px;
@@ -30,3 +17,21 @@ pagination {
     padding-left: 0;
   }
 }
+
+.videos-miniatures {
+  min-height: 600px;
+
+  my-videos-miniature {
+    display: inline-block;
+  }
+
+  .no-video {
+    margin-top: 50px;
+    text-align: center;
+  }
+}
+
+pagination {
+  display: block;
+  text-align: center;
+}

client/angular/videos/components/list/videos-list.component.ts

@@ -12,12 +12,13 @@ import { VideoMiniatureComponent } from './video-miniature.component';
 import { Search, SearchField } from '../../../app/search';
 import { VideoSortComponent } from './video-sort.component';
 import { SortField } from './sort';
+import { LoaderComponent } from '../../loader.component';
 
 @Component({
   selector: 'my-videos-list',
   styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ],
   templateUrl: 'app/angular/videos/components/list/videos-list.component.html',
-  directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent ]
+  directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
 })
 
 export class VideosListComponent implements OnInit {
@@ -29,6 +30,7 @@ export class VideosListComponent implements OnInit {
     total: 0
   };
   sort: SortField;
+  loading: boolean = false;
 
   private search: Search;
 
@@ -55,6 +57,9 @@ export class VideosListComponent implements OnInit {
   }
 
   getVideos() {
+    this.loading = true;
+    this.videos = [];
+
     let observable = null;
 
     if (this.search.value !== null) {
@@ -67,6 +72,7 @@ export class VideosListComponent implements OnInit {
       ({ videos, totalVideos }) => {
         this.videos = videos;
         this.pagination.total = totalVideos;
+        this.loading = false;
       },
       error => alert(error)
     );

client/angular/videos/components/watch/videos-watch.component.html

@@ -1,7 +1,4 @@
-<!-- Loader -->
+<my-loader [loading]="loading"></my-loader>
-<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
 
 <div class="embed-responsive embed-responsive-19by9">
 </div>

client/angular/videos/components/watch/videos-watch.component.scss

@@ -2,33 +2,6 @@
   height: 500px;
 }
 
-#video-loading {
-  margin-top: 150px;
-}
-
-// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
-.glyphicon-refresh-animate {
-    -animation: spin .7s infinite linear;
-    -ms-animation: spin .7s infinite linear;
-    -webkit-animation: spinw .7s infinite linear;
-    -moz-animation: spinm .7s infinite linear;
-}
-
-@keyframes spin {
-    from { transform: scale(1) rotate(0deg);}
-    to { transform: scale(1) rotate(360deg);}
-}
-
-@-webkit-keyframes spinw {
-    from { -webkit-transform: rotate(0deg);}
-    to { -webkit-transform: rotate(360deg);}
-}
-
-@-moz-keyframes spinm {
-    from { -moz-transform: rotate(0deg);}
-    to { -moz-transform: rotate(360deg);}
-}
-
 #torrent-info {
   font-size: 10px;
 

client/angular/videos/components/watch/videos-watch.component.ts

@@ -3,6 +3,8 @@ import { RouteParams, CanDeactivate, ComponentInstruction } from '@angular/route
 
 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
 
+import { LoaderComponent } from '../../loader.component';
+
 // TODO import it with systemjs
 declare var WebTorrent: any;
 
@@ -13,6 +15,7 @@ import { VideosService } from '../../videos.service';
   selector: 'my-video-watch',
   templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html',
   styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ],
+  directives: [ LoaderComponent ],
   pipes: [ BytesPipe ]
 })
 

client/angular/videos/loader.component.html

@@ -0,0 +1,3 @@
+<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>

client/angular/videos/loader.component.scss

@@ -0,0 +1,26 @@
+div {
+  margin-top: 150px;
+}
+
+// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
+.glyphicon-refresh-animate {
+    -animation: spin .7s infinite linear;
+    -ms-animation: spin .7s infinite linear;
+    -webkit-animation: spinw .7s infinite linear;
+    -moz-animation: spinm .7s infinite linear;
+}
+
+@keyframes spin {
+    from { transform: scale(1) rotate(0deg);}
+    to { transform: scale(1) rotate(360deg);}
+}
+
+@-webkit-keyframes spinw {
+    from { -webkit-transform: rotate(0deg);}
+    to { -webkit-transform: rotate(360deg);}
+}
+
+@-moz-keyframes spinm {
+    from { -moz-transform: rotate(0deg);}
+    to { -moz-transform: rotate(360deg);}
+}

client/angular/videos/loader.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'my-loader',
+  styleUrls: [ 'app/angular/videos/loader.component.css' ],
+  templateUrl: 'app/angular/videos/loader.component.html'
+})
+
+export class LoaderComponent {
+  @Input() loading: boolean;
+}

client/tsconfig.json

@@ -36,6 +36,7 @@
     "angular/videos/components/list/video-sort.component.ts",
     "angular/videos/components/list/videos-list.component.ts",
     "angular/videos/components/watch/videos-watch.component.ts",
+    "angular/videos/loader.component.ts",
     "angular/videos/pagination.ts",
     "angular/videos/video.ts",
     "angular/videos/videos.service.ts",