Add loader indication when loading videos list

5 files changed, 14 insertions, 7 deletions

diff --git a/client/src/app/videos/shared/loader/loader.component.html b/client/src/app/videos/shared/loader/loader.component.html
index d02296a2d..38d06950e 100644
--- a/client/src/app/videos/shared/loader/loader.component.html
+++ b/client/src/app/videos/shared/loader/loader.component.html
@@ -1,3 +1,3 @@
-<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
+<div id="video-loading" *ngIf="loading">
   <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
 </div>
diff --git a/client/src/app/videos/shared/loader/loader.component.scss b/client/src/app/videos/shared/loader/loader.component.scss
index 454195811..44cf1f9da 100644
--- a/client/src/app/videos/shared/loader/loader.component.scss
+++ b/client/src/app/videos/shared/loader/loader.component.scss
@@ -1,7 +1,3 @@
-div {
-  margin-top: 150px;
-}
-
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
     -animation: spin .7s infinite linear;
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 5ba39f8f2..dc2c065d8 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -16,6 +16,11 @@
     font-size: 13px;
     padding-left: 0;
   }
+
+  my-loader {
+    display: inline-block;
+    margin-left: 5px;
+  }
 }
 
 .videos-miniatures {
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 6c36b27e2..353cb2241 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -1,6 +1,5 @@
-<my-loader [loading]="loading"></my-loader>
-
 <div class="embed-responsive embed-responsive-19by9">
+  <my-loader [loading]="loading"></my-loader>
 </div>
 
 <div id="torrent-info">
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index 1228d42f4..474de74d9 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -1,3 +1,10 @@
+my-loader {
+  display: block;
+  padding-top: 200px;
+  width: 100%;
+  text-align: center;
+}
+
 .embed-responsive {
   height: 500px;
 }