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'] = '';
 }
-