Use a FontAwesome spinner to replace the old unaligned one

customize.dist/src/less/toolbar.less

@@ -243,8 +243,10 @@
             vertical-align: top;
             display: inline-block;
         }
-        span.fa {
-            vertical-align: baseline;
+        button {
+            span.fa {
+                vertical-align: baseline;
+            }
         }
         @media screen and (max-width: @media-narrow-screen) {
             top: 3em;
@@ -313,11 +315,11 @@
     text-align: right;
 }
 .cryptpad-spinner {
-    display: inline-block;
-    height: 26px;
-    margin: 2px;
-    line-height: 26px;
-    font-size: 20px;
+    height: 16px;
+    width: 16px;
+    margin: 8px;
+    line-height: 16px;
+    font-size: 16px;
 }
 .cryptpad-readonly {
     margin-right: 5px;

customize.dist/toolbar.css

@@ -290,7 +290,7 @@
   vertical-align: top;
   display: inline-block;
 }
-.cryptpad-toolbar-top .cryptpad-user span.fa {
+.cryptpad-toolbar-top .cryptpad-user button span.fa {
   vertical-align: baseline;
 }
 @media screen and (max-width: 400px) {
@@ -364,11 +364,11 @@
   text-align: right;
 }
 .cryptpad-spinner {
-  display: inline-block;
-  height: 26px;
-  margin: 2px;
-  line-height: 26px;
-  font-size: 20px;
+  height: 16px;
+  width: 16px;
+  margin: 8px;
+  line-height: 16px;
+  font-size: 16px;
 }
 .cryptpad-readonly {
   margin-right: 5px;

www/common/toolbar.js

@@ -43,7 +43,6 @@ define([
     var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow';
 
     var SPINNER_DISAPPEAR_TIME = 3000;
-    var SPINNER = [ '-', '\\', '|', '/' ];
 
     var uid = function () {
         return 'cryptpad-uid-' + String(Math.random()).substring(2);
@@ -80,21 +79,19 @@ define([
     };
 
     var createSpinner = function ($container) {
-        var $spinner = $('<div>', {
+        var $spinner = $('<span>', {
             id: uid(),
-            'class': SPINNER_CLS,
-        });
+            'class': SPINNER_CLS + ' fa fa fa-spinner fa-pulse',
+        }).hide();
         $container.prepend($spinner);
         return $spinner[0];
     };
 
-    var kickSpinner = function (spinnerElement, reversed) {
-        var txt = spinnerElement.textContent || '-';
-        var inc = (reversed) ? -1 : 1;
-        spinnerElement.textContent = SPINNER[(SPINNER.indexOf(txt) + inc) % SPINNER.length];
+    var kickSpinner = function (spinnerElement) {
+        $(spinnerElement).show();
         if (spinnerElement.timeout) { clearTimeout(spinnerElement.timeout); }
         spinnerElement.timeout = setTimeout(function () {
-            spinnerElement.textContent = '';
+            $(spinnerElement).hide();
         }, SPINNER_DISAPPEAR_TIME);
     };
 
@@ -616,7 +613,7 @@ define([
         }
 
         var ks = function () {
-            if (connected) { kickSpinner(spinner, false); }
+            if (connected) { kickSpinner(spinner); }
         };
 
         realtime.onPatch(ks);