Add a loader animation when loading the videos list

3 files changed, 4 insertions, 31 deletions

diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html
index 9e8f50908..6c36b27e2 100644
--- a/client/angular/videos/components/watch/videos-watch.component.html
+++ b/client/angular/videos/components/watch/videos-watch.component.html
@@ -1,7 +1,4 @@
-<!-- Loader -->
-<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
+<my-loader [loading]="loading"></my-loader>
 
 <div class="embed-responsive embed-responsive-19by9">
 </div>
diff --git a/client/angular/videos/components/watch/videos-watch.component.scss b/client/angular/videos/components/watch/videos-watch.component.scss
index 62ae8a126..1228d42f4 100644
--- a/client/angular/videos/components/watch/videos-watch.component.scss
+++ b/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;
 
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
index 6e212e8bc..e551e1f9a 100644
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/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 ]
 })