Add loader for http requests.

package-lock.json

@@ -12622,6 +12622,11 @@
       "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
       "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ=="
     },
+    "vue-progressbar": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/vue-progressbar/-/vue-progressbar-0.7.5.tgz",
+      "integrity": "sha512-VeNG/inMsFbvdCTS7lJ1gjDAKSUZdqkhW9gS1tb0we1rqFKxR+BCEiVUgw5C84vODKb14M2GWHTw0WVdpoVg6g=="
+    },
     "vue-router": {
       "version": "3.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz",

package.json

@@ -27,6 +27,7 @@
     "vue-autosuggest": "^2.2.0",
     "vue-multiselect": "^2.1.6",
     "vue-notification": "^1.3.16",
+    "vue-progressbar": "^0.7.5",
     "vue-router": "^3.0.3",
     "vue2-datepicker": "^3.7.0",
     "vuex": "^3.0.1"

src/App.vue

@@ -2,6 +2,7 @@
     <div id="app"
          class="min-vh-100"
          :class="$route.name">
+        <vue-progress-bar/>
         <transition name="fade" mode="out-in">
             <router-view/>
         </transition>

src/config/progressbar.config.js

@@ -0,0 +1,5 @@
+export default {
+  color: 'var(--primary)',
+  failedColor: 'var(--error)',
+  thickness: '2px',
+};

src/main.js

@@ -1,6 +1,8 @@
 import 'es6-promise';
+import VueProgressBar from 'vue-progressbar';
+import progressbarConfig from '@/config/progressbar.config';
 import '@/config/local-storage.config';
-import { BVModalPlugin } from 'bootstrap-vue';
+import { VBModalPlugin } from 'bootstrap-vue';
 import Vue from 'vue';
 import App from '@/App.vue';
 import router from '@/router';
@@ -9,8 +11,9 @@ import VueNotifications from 'vue-notification';
 import './registerServiceWorker';
 import i18n from './config/i18n.config';
 
-Vue.use(BVModalPlugin);
+Vue.use(VBModalPlugin);
 Vue.use(VueNotifications);
+Vue.use(VueProgressBar, progressbarConfig);
 
 Vue.config.productionTip = false;
 

src/services/adapters/wordpress.adapter.js

@@ -1,4 +1,6 @@
 import axios from 'axios';
+import app from '@/main';
+import NotificationService from '@/services/notification.service';
 import { removeVuexORMFlags } from '@/utils/helpers';
 
 const config = window.name ? JSON.parse(window.name) : { api_url: '', nonce: '' };
@@ -10,6 +12,34 @@ const http = axios.create({
   },
 });
 
+http.interceptors.request.use((request) => {
+  if (typeof request.hideLoading === 'undefined' || !request.hideLoading) {
+    app.$Progress.start();
+  }
+  return request;
+}, (error) => {
+  app.$Progress.finish();
+
+  NotificationService.error('Network error. Check your connection');
+  return Promise.reject(error);
+});
+
+http.interceptors.response.use((response) => {
+  app.$Progress.finish();
+
+  return response;
+}, (error) => {
+  app.$Progress.finish();
+
+  // Server down
+  if (error.response.status >= 500) {
+    NotificationService.error('Server Unavailable.');
+    return Promise.reject(error);
+  }
+
+  return Promise.reject(error);
+});
+
 class WordpressAdapter {
   async get(uri) {
     const parts = uri.split('/');