diff options
| author | rr- | 2016-05-08 18:57:55 +0200 |
|---|---|---|
| committer | rr- | 2016-05-08 18:59:11 +0200 |
| commit | 7610761ec859114756d591888e7b26d77987125a (patch) | |
| tree | 62db659b682e2917cfcce0272800b7e7abf2013f | |
| parent | f083e5fdc896a4a2eab6dfcd8e7eb04ca47afee5 (diff) | |
client/general: add nprogress to API calls
| -rw-r--r-- | client/css/nprogress.styl | 41 | ||||
| -rw-r--r-- | client/js/api.js | 3 | ||||
| -rw-r--r-- | client/package.json | 1 |
3 files changed, 45 insertions, 0 deletions
diff --git a/client/css/nprogress.styl b/client/css/nprogress.styl new file mode 100644 index 0000000..97e57b9 --- /dev/null +++ b/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 diff --git a/client/js/api.js b/client/js/api.js index 515e2b4..b23daa5 100644 --- a/client/js/api.js +++ b/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', diff --git a/client/package.json b/client/package.json index e444f44..76a14ad 100644 --- a/client/package.json +++ b/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", |