Show loader during an action

package.json

@@ -16,6 +16,7 @@
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
     "vue-fragment": "^1.5.1",
+    "vue-loading-overlay": "^3.2.0",
     "vue-router": "^3.0.3",
     "vuetify": "^2.0.0",
     "vuex": "^3.0.1",

src/App.vue

@@ -1,21 +1,39 @@
 <template>
-<Layout>
-  <v-container>
-    <router-view></router-view>
-  </v-container>
-</Layout>
+  <fragment>
+    <loading
+      :active.sync="isLoading"
+      color="indigo"
+      loader="dots"
+      is-full-page
+    ></loading>
+    <Layout>
+      <v-container>
+        <router-view></router-view>
+      </v-container>
+    </Layout>
+  </fragment>
 </template>
 
 <script>
+import Loading from 'vue-loading-overlay';
+import 'vue-loading-overlay/dist/vue-loading.css';
+import { mapGetters } from 'vuex';
+
 import Layout from './components/layout';
 
 export default {
   name: 'App',
   components: {
     Layout,
+    Loading,
   },
   data: () => ({
     //
   }),
+  computed: {
+    ...mapGetters([
+      'isLoading',
+    ]),
+  },
 };
 </script>

src/main.js

@@ -1,12 +1,12 @@
+import 'roboto-fontface/css/roboto/roboto-fontface.css';
+import '@mdi/font/css/materialdesignicons.css';
 import { sync } from 'vuex-router-sync';
 import { Plugin } from 'vue-fragment';
 import Vue from 'vue';
 import App from './App';
 import router from './router';
 import store from './store';
 import vuetify from './plugins/vuetify';
-import 'roboto-fontface/css/roboto/roboto-fontface.css';
-import '@mdi/font/css/materialdesignicons.css';
 
 Vue.config.productionTip = false;
 sync(store, router);

src/store/index.js

@@ -4,6 +4,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 
 import authentication from './modules/authentication';
+import { Loading } from './plugins';
 
 Vue.use(Vuex);
 
@@ -12,24 +13,31 @@ const debug = process.env.NODE_ENV !== 'production';
 const plugins = debug ? [
   createLogger(),
   // createPersistedState(),
+  Loading,
 ] : [
   createPersistedState(),
+  Loading,
 ];
 
 export default new Vuex.Store({
   state: {
     baseUrl: '/api',
+    loading: false,
   },
   mutations: {
-
+    setLoading(state, loading) {
+      state.loading = loading;
+    },
   },
   actions: {
-
   },
   modules: {
     authentication,
   },
   getters: {
+    isLoading(state) {
+      return state.loading;
+    },
     getErrorMessage: () => (response) => {
       console.log('HERE', response);
       const { status, data: { data: { errors } = {}, message } } = response;

src/store/plugins/index.js

@@ -0,0 +1 @@
+export { default as Loading } from './loading';

src/store/plugins/loading.js

@@ -0,0 +1,12 @@
+export default (store) => {
+  store.subscribeAction({
+    before: (action) => {
+      console.log(`before action ${action.type}`);
+      store.commit('setLoading', true, { root: true });
+    },
+    after: (action) => {
+      console.log(`after action ${action.type}`);
+      store.commit('setLoading', false, { root: true });
+    },
+  });
+};

vue.config.js

@@ -2,9 +2,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'https://localhost:8000',
-        ws: true,
-        changeOrigin: true,
+        target: 'http://localhost:8000',
         headers: {
           Connection: 'keep-alive',
         },