client - add progress bar to ajax requests

client/app/axios/axios.ts

@@ -1,7 +1,10 @@
-import axios, { AxiosInstance, AxiosResponse } from 'axios';
+import axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig } from 'axios';
 import fingerprintjs2 from 'fingerprintjs2';
+import nprogress from 'nprogress';
 import userStore from '../stores/user-store';
 
+nprogress.configure({ showSpinner: false });
+
 // create our own instance of axios so we can set request headers
 const ax: AxiosInstance = axios.create();
 export default ax;
@@ -9,9 +12,20 @@ export default ax;
 // setup our axios instance - must be done before app bootstraps
 export const initializeAxios = (): Promise<void> => {
   return new Promise((resolve: any) => {
+    ax.interceptors.request.use(
+      (config: AxiosRequestConfig) => {
+        nprogress.start();
+        return config;
+      },
+      (error: any) => {
+        return error;
+      },
+    );
+
     // response interceptors
     ax.interceptors.response.use(
       (config: AxiosResponse) => {
+        nprogress.done();
         return config;
       },
       (error: any) => {
@@ -38,7 +52,6 @@ export const initializeAxios = (): Promise<void> => {
   });
 };
 
-
 export function setAuthorizationHeader(jwt: string): void {
   ax.defaults.headers.common['Authorization'] = `Bearer ${jwt}`;
 }
@@ -46,4 +59,3 @@ export function setAuthorizationHeader(jwt: string): void {
 export function resetAuthorizationHeader(): void {
   ax.defaults.headers.common['Authorization'] = '';
 }
-

client/app/scss/style.scss

@@ -1,3 +1,5 @@
+@import '~nprogress/nprogress.css';
+
 $fontPrimary: #cccccc;
 $linkColor: #FFB019;
 

client/package.json

@@ -17,6 +17,7 @@
     "@types/luxon": "^0.2.2",
     "@types/marked": "^0.3.0",
     "@types/node": "^9.3.0",
+    "@types/nprogress": "^0.0.29",
     "@types/query-string": "^5.0.1",
     "@types/react": "^16.0.34",
     "@types/react-dom": "^16.0.3",
@@ -45,6 +46,7 @@
     "mobx-react": "^4.3.5",
     "node-sass": "^4.7.2",
     "normalize.css": "^7.0.0",
+    "nprogress": "^0.2.0",
     "postcss-loader": "^2.0.9",
     "prettier": "^1.9.2",
     "query-string": "^5.0.1",

client/yarn.lock

@@ -30,6 +30,10 @@
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.3.0.tgz#3a129cda7c4e5df2409702626892cb4b96546dd5"
 
+"@types/nprogress@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.0.29.tgz#060bd510022a005f1840234030d3132fb9195471"
+
 "@types/query-string@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-5.0.1.tgz#6cb41c724cb1644d56c2d1dae7c7b204e706b39e"
@@ -4102,6 +4106,10 @@ npm-run-path@^2.0.0:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+
 nth-check@~1.0.0, nth-check@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"