Add a loader animation when loading the videos list

3 files changed, 28 insertions, 15 deletions

diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html
index 3e30b39b0..edbbaf3ae 100644
--- a/client/angular/videos/components/list/videos-list.component.html
+++ b/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>
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss
index 2abc47b1b..9441d80c3 100644
--- a/client/angular/videos/components/list/videos-list.component.scss
+++ b/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;
+}
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
index 94b064e16..56230e331 100644
--- a/client/angular/videos/components/list/videos-list.component.ts
+++ b/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)
     );