5 files changed, 29 insertions, 2 deletions

diff --git a/client/src/app/shared/buttons/button.component.html b/client/src/app/shared/buttons/button.component.html
index b6df67102..d2b0eb81a 100644
--- a/client/src/app/shared/buttons/button.component.html
+++ b/client/src/app/shared/buttons/button.component.html
@@ -1,4 +1,6 @@
 <span class="action-button" [ngClass]="className" [title]="getTitle()">
-  <my-global-icon [iconName]="icon"></my-global-icon>
+  <my-global-icon *ngIf="!loading" [iconName]="icon"></my-global-icon>
+  <my-small-loader [loading]="loading"></my-small-loader>
+
   <span class="button-label">{{ label }}</span>
 </span>
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 99d7f51c1..4cc2b0573 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -1,6 +1,12 @@
 @import '_variables';
 @import '_mixins';
 
+my-small-loader /deep/ .root {
+  display: inline-block;
+  margin: 0 3px 0 0;
+  width: 20px;
+}
+
 .action-button {
   @include peertube-button-link;
   @include button-with-icon(21px, 0, -2px);
diff --git a/client/src/app/shared/buttons/button.component.ts b/client/src/app/shared/buttons/button.component.ts
index cf334e8d5..cac5ad210 100644
--- a/client/src/app/shared/buttons/button.component.ts
+++ b/client/src/app/shared/buttons/button.component.ts
@@ -12,6 +12,7 @@ export class ButtonComponent {
   @Input() className = 'grey-button'
   @Input() icon: GlobalIconName = undefined
   @Input() title: string = undefined
+  @Input() loading = false
 
   getTitle () {
     return this.title || this.label
diff --git a/client/src/app/shared/misc/small-loader.component.html b/client/src/app/shared/misc/small-loader.component.html
index 5a7cea738..7886f8918 100644
--- a/client/src/app/shared/misc/small-loader.component.html
+++ b/client/src/app/shared/misc/small-loader.component.html
@@ -1,3 +1,3 @@
-<div *ngIf="loading">
+<div class="root" *ngIf="loading">
   <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
 </div>
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 85fc1c3a0..098496d45 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -134,6 +134,23 @@ function scrollToTop () {
   window.scroll(0, 0)
 }
 
+// Thanks https://stackoverflow.com/a/16187766
+function compareSemVer (a: string, b: string) {
+  const regExStrip0 = /(\.0+)+$/
+  const segmentsA = a.replace(regExStrip0, '').split('.')
+  const segmentsB = b.replace(regExStrip0, '').split('.')
+
+  const l = Math.min(segmentsA.length, segmentsB.length)
+
+  for (let i = 0; i < l; i++) {
+    const diff = parseInt(segmentsA[ i ], 10) - parseInt(segmentsB[ i ], 10)
+
+    if (diff) return diff
+  }
+
+  return segmentsA.length - segmentsB.length
+}
+
 export {
   sortBy,
   durationToString,
@@ -144,6 +161,7 @@ export {
   getAbsoluteAPIUrl,
   dateToHuman,
   immutableAssign,
+  compareSemVer,
   objectToFormData,
   objectLineFeedToHtml,
   removeElementFromArray,