Use bootstrap loader

client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html

@@ -80,7 +80,7 @@
 
             <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
 
-            <my-small-loader class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-small-loader>
+            <my-loader size="sm" class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-loader>
           </div>
         </my-video-comment>
 

client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html

@@ -9,7 +9,7 @@
   <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
     <ng-container i18n>Show more</ng-container>
     <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
-    <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader>
+    <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
   </div>
 
   <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">

client/src/app/menu/notification.component.html

@@ -36,7 +36,7 @@
     </div>
 
     <div *ngIf="!loaded" class="loader mt-4">
-      <my-loader [loading]="!loaded"></my-loader>
+      <my-loader size="xl" [loading]="!loaded"></my-loader>
     </div>
 
     <my-user-notifications

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>

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 {

client/src/app/shared/shared-main/loaders/index.ts

@@ -1,2 +1 @@
 export * from './loader.component'
-export * from './small-loader.component'

client/src/app/shared/shared-main/loaders/loader.component.html

@@ -1,8 +0,0 @@
-<div *ngIf="loading">
-  <div class="loader">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-</div>

client/src/app/shared/shared-main/loaders/loader.component.scss

@@ -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);
-  }
-}

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]
+  }
 }

client/src/app/shared/shared-main/loaders/small-loader.component.html

@@ -1,3 +0,0 @@
-<div class="root" *ngIf="loading">
-  <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
-</div>

client/src/app/shared/shared-main/loaders/small-loader.component.ts

@@ -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
-}

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,

client/src/sass/bootstrap.scss

@@ -26,17 +26,13 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import '~bootstrap/scss/modal';
 @import '~bootstrap/scss/tooltip';
 @import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/spinners';
 
 @import '~bootstrap/scss/helpers';
 @import '~bootstrap/scss/utilities/api';
 
 @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
 
-// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
-.glyphicon-refresh-animate {
-  animation: spin 0.7s infinite linear;
-}
-
 .flex-auto {
   flex: auto;
 }
@@ -45,16 +41,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   cursor: pointer !important;
 }
 
-@keyframes spin {
-  from {
-    transform: scale(1) rotate(0deg);
-  }
-
-  to {
-    transform: scale(1) rotate(360deg);
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Dropdown
 // ---------------------------------------------------------------------------