diff --git a/package-lock.json b/package-lock.json
index 2221b26..7d64235 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 3ea0ad2..24e0be3 100644
--- a/package.json
+++ b/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"
diff --git a/src/App.vue b/src/App.vue
index f2cdc9c..894c17a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
+
diff --git a/src/config/progressbar.config.js b/src/config/progressbar.config.js
new file mode 100644
index 0000000..6f57053
--- /dev/null
+++ b/src/config/progressbar.config.js
@@ -0,0 +1,5 @@
+export default {
+ color: 'var(--primary)',
+ failedColor: 'var(--error)',
+ thickness: '2px',
+};
diff --git a/src/main.js b/src/main.js
index 57b3de6..fa0c68b 100644
--- a/src/main.js
+++ b/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;
diff --git a/src/services/adapters/wordpress.adapter.js b/src/services/adapters/wordpress.adapter.js
index 26e66a7..35aaa21 100644
--- a/src/services/adapters/wordpress.adapter.js
+++ b/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('/');