client/general: add nprogress to API calls

client/css/nprogress.styl

@@ -0,0 +1,41 @@
+@import colors
+
+#nprogress
+    pointer-events: none
+
+    .bar
+        background: $main-color
+        position: fixed
+        z-index: 1031
+        top: 0
+        left: 0
+        width: 100%
+        height: 2px
+
+    .spinner-icon
+        width: 18px
+        height: 18px
+        box-sizing: border-box
+        border: solid 2px transparent
+        border-top-color: $main-color
+        border-left-color: $main-color
+        border-radius: 50%
+        animation: nprogress-spinner 400ms linear infinite
+
+    .peg
+        display: block
+        position: absolute
+        right: 0px
+        width: 100px
+        height: 100%
+        box-shadow: 0 0 10px $main-color, 0 0 5px $main-color
+        opacity: 1.0
+        transform: rotate(3deg) translate(0px, -4px)
+
+.nprogress-custom-parent
+    overflow: hidden
+    position: relative
+
+    #nprogress .spinner,
+    #nprogress .bar
+        position: absolute

client/js/api.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const nprogress = require('nprogress');
 const cookies = require('js-cookie');
 const request = require('superagent');
 const config = require('./config.js');
@@ -52,6 +53,7 @@ class Api {
     _process(url, requestFactory, data, files) {
         const fullUrl = this.getFullUrl(url);
         return new Promise((resolve, reject) => {
+            nprogress.start();
             let req = requestFactory(fullUrl);
             if (data) {
                 req.attach('metadata', new Blob([JSON.stringify(data)]));
@@ -66,6 +68,7 @@ class Api {
             }
             req.set('Accept', 'application/json')
                 .end((error, response) => {
+                    nprogress.done();
                     if (error) {
                         reject(response && response.body ? response.body : {
                             'title': 'Networking error',

client/package.json

@@ -20,6 +20,7 @@
     "js-yaml": "^3.5.5",
     "merge": "^1.2.0",
     "mousetrap": "^1.5.3",
+    "nprogress": "^0.2.0",
     "page": "^1.7.1",
     "stylus": "^0.54.2",
     "superagent": "^1.8.3",