Use bootstrap loader

9 files changed, 22 insertions, 80 deletions

diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index c0a4b21b8..3e558bbb8 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -7,7 +7,7 @@
 </a>
 
 <ng-template #content>
-  <my-small-loader [loading]="loading"></my-small-loader>
+  <my-loader size="sm" [loading]="loading"></my-loader>
   <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
 
   <span *ngIf="label" class="button-label">{{ label }}</span>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 776f6622e..cdd75d525 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -20,12 +20,6 @@
   display: inline-block;
 }
 
-my-small-loader ::ng-deep .root {
-  display: inline-block;
-  margin: 0 3px 0 0;
-  width: 20px;
-}
-
 a[class$=-button],
 span[class$=-button] {
   > span {
diff --git a/client/src/app/shared/shared-main/loaders/index.ts b/client/src/app/shared/shared-main/loaders/index.ts
index a061914d5..60483727c 100644
--- a/client/src/app/shared/shared-main/loaders/index.ts
+++ b/client/src/app/shared/shared-main/loaders/index.ts
@@ -1,2 +1 @@
 export * from './loader.component'
-export * from './small-loader.component'
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.html b/client/src/app/shared/shared-main/loaders/loader.component.html
deleted file mode 100644
index ca8ed063e..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div *ngIf="loading">
-  <div class="loader">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-</div>
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
deleted file mode 100644
index b88b0db6a..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@use '_variables' as *;
-@use '_mixins' as *;
-
-// Thanks to https://loading.io/css/ (CC0 License)
-
-.loader {
-  display: inline-block;
-  position: relative;
-  width: 50px;
-  height: 50px;
-}
-
-.loader div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 44px;
-  height: 44px;
-  margin: 6px;
-  border: 4px solid;
-  border-radius: 50%;
-  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #999999 transparent transparent;
-}
-
-.loader div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-
-.loader div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-
-.loader div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-
-@keyframes loader {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index e3b1eea3a..ce8685a09 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -2,9 +2,27 @@ import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'my-loader',
-  styleUrls: [ './loader.component.scss' ],
-  templateUrl: './loader.component.html'
+  template: `<div *ngIf="loading" class="spinner-border" [ngStyle]="getStyle()" role="status"></div>`
 })
 export class LoaderComponent {
   @Input() loading: boolean
+  @Input() size: 'sm' | 'xl'
+
+  private readonly sizes = {
+    sm: {
+      width: '1rem',
+      height: '1rem',
+      'border-width': '.2em'
+    },
+    xl: {
+      width: '3rem',
+      height: '3rem'
+    }
+  }
+
+  getStyle () {
+    if (!this.size) return undefined
+
+    return this.sizes[this.size]
+  }
 }
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.html b/client/src/app/shared/shared-main/loaders/small-loader.component.html
deleted file mode 100644
index 7886f8918..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="root" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.ts b/client/src/app/shared/shared-main/loaders/small-loader.component.ts
deleted file mode 100644
index 191877f14..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
-  selector: 'my-small-loader',
-  styleUrls: [ ],
-  templateUrl: './small-loader.component.html'
-})
-
-export class SmallLoaderComponent {
-  @Input() loading: boolean
-}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 5629640bc..89f43239f 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -34,7 +34,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
 import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
-import { LoaderComponent, SmallLoaderComponent } from './loaders'
+import { LoaderComponent } from './loaders'
 import {
   ChannelsSetupMessageComponent,
   HelpComponent,
@@ -97,7 +97,6 @@ import { VideoChannelService } from './video-channel'
     FeedComponent,
 
     LoaderComponent,
-    SmallLoaderComponent,
 
     ChannelsSetupMessageComponent,
     HelpComponent,
@@ -157,7 +156,6 @@ import { VideoChannelService } from './video-channel'
     FeedComponent,
 
     LoaderComponent,
-    SmallLoaderComponent,
 
     ChannelsSetupMessageComponent,
     HelpComponent,