Add loader indication when loading videos list

diff --git a/client/src/app/videos/shared/loader/loader.component.html b/client/src/app/videos/shared/loader/loader.component.html
index d02296a2d416dbb17630b731c88a828c03dcbe70..38d06950ec200c8ea2377c4c38e06984d18a0273 100644 (file)
--- 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 4541958112ee046a462cd663e514ebd207d98ee3..44cf1f9da4183bf9bdbe5766ba988280fe41b35e 100644 (file)
--- 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 5ba39f8f235c3471f0a30f6ce1c13a2f8e87d433..dc2c065d82e21e7303db0e2c67468d835a84f372 100644 (file)
--- 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 6c36b27e2b76af0a6a6660e1ffa79decd4de6dd9..353cb2241c0a04e387d2270ebd5b1488edb4bdff 100644 (file)
--- 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 1228d42f44c1c435127b52692059575268e75477..474de74d92a5225d735cdfb79433e4ecbb8bbd2d 100644 (file)
--- 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;
 }