Apply a fade instead of a loader when loading videos

diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index 80b1e7b1b02606c7a118c6397a842c7ba2b254ba..155025b5e2ec4b81966785073c869115bb66615d 100644 (file)
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -4,11 +4,9 @@
 </div>
 
 <div class="videos-miniatures">
-  <my-loader [loading]="loading"></my-loader>
-
   <div class="col-md-12 no-video" *ngIf="noVideo()">There is no video.</div>
 
-  <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
+  <my-video-miniature class="ng-animate "*ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
   </my-video-miniature>
 </div>
 

diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index 9441d80c3d5bff12346c45afb6cae40f22b6b032..5ba39f8f235c3471f0a30f6ce1c13a2f8e87d433 100644 (file)
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -21,8 +21,20 @@
 .videos-miniatures {
   min-height: 600px;
 
-  my-videos-miniature {
-    display: inline-block;
+  my-video-miniature {
+    transition: all 0.5s ease;
+
+    &.ng-enter {
+      opacity: 0;
+    }
+
+    &.ng-enter-active {
+      opacity: 1;
+    }
+
+    &.ng-leave {
+      opacity: 0;
+    }
   }
 
   .no-video {