Show loading dots whenever an action is performed

Author: Bhanu Teja P

src/App.vue

@@ -4,7 +4,6 @@
       :active.sync="isLoading"
       color="indigo"
       loader="dots"
-      opacity=0.4
       is-full-page
     ></loading>
     <Layout>

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,8 +13,10 @@ const debug = process.env.NODE_ENV !== 'production';
 const plugins = debug ? [
   createLogger(),
   // createPersistedState(),
+  Loading,
 ] : [
   createPersistedState(),
+  Loading,
 ];
 
 export default new Vuex.Store({

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',
         },