3 files changed, 19 insertions, 2 deletions

diff --git a/client/src/app/shared/misc/loader.component.html b/client/src/app/shared/misc/loader.component.html
new file mode 100644
index 000000000..38d06950e
--- /dev/null
+++ b/client/src/app/shared/misc/loader.component.html
@@ -0,0 +1,3 @@
+<div id="video-loading" *ngIf="loading">
+  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
+</div>
diff --git a/client/src/app/shared/misc/loader.component.ts b/client/src/app/shared/misc/loader.component.ts
new file mode 100644
index 000000000..f37d70c85
--- /dev/null
+++ b/client/src/app/shared/misc/loader.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-loader',
+  styleUrls: [ ],
+  templateUrl: './loader.component.html'
+})
+
+export class LoaderComponent {
+  @Input() loading: boolean
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 47f651590..456ce851e 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -19,6 +19,7 @@ import { SearchComponent, SearchService } from './search'
 import { UserService } from './users'
 import { VideoAbuseService } from './video-abuse'
 import { VideoBlacklistService } from './video-blacklist'
+import { LoaderComponent } from './misc/loader.component'
 
 @NgModule({
   imports: [
@@ -40,7 +41,8 @@ import { VideoBlacklistService } from './video-blacklist'
   declarations: [
     BytesPipe,
     KeysPipe,
-    SearchComponent
+    SearchComponent,
+    LoaderComponent
   ],
 
   exports: [
@@ -59,7 +61,8 @@ import { VideoBlacklistService } from './video-blacklist'
     BytesPipe,
     KeysPipe,
 
-    SearchComponent
+    SearchComponent,
+    LoaderComponent
   ],
 
   providers: [