Merge branch 'master' into kp/header

Author: kp54

src/App.vue

@@ -5,6 +5,7 @@
       <router-link :to="{ name: 'home' }">
         <img class="logo" src="@/assets/logo.svg" alt="ProLab">
       </router-link>
+    <loading-indicator/>
     </header>
     <router-view v-show="!isError"/>
   </div>
@@ -13,10 +14,12 @@
 <script>
 import { mapGetters } from 'vuex';
 import ErrorPage from './components/ErrorPage.vue';
+import LoadingIndicator from './components/LoadingIndicator.vue';
 
 export default {
   components: {
     ErrorPage,
+    LoadingIndicator,
   },
   computed: {
     ...mapGetters('criticalError', ['isError']),
@@ -55,5 +58,4 @@ header img {
     margin-left: 30px;
   }
 }
-
 </style>

src/components/LoadingIndicator.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="loading-indicator-container">
+    <div :class="[ isLoading ? 'loading-indicator-active' : 'loading-indicator-inactive' ]"></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  computed: {
+    ...mapState('ui', ['isLoading']),
+  },
+};
+</script>
+
+<style scoped>
+.loading-indicator-container {
+  height: 5px;
+  width: 100%;
+}
+
+.loading-indicator-inactive {
+  height: 100%;
+  width: 0;
+  margin-left: 0;
+}
+
+.loading-indicator-active {
+  height: 100%;
+  background-color: cornflowerblue;
+  animation: loading 1.5s linear infinite;
+}
+
+@keyframes loading {
+  0% {
+    width: 0;
+    margin-left: 0;
+  }
+
+  50% {
+    margin-left: 0;
+    width: 50%;
+  }
+
+  100% {
+    margin-left: 100%;
+    width: 0%;
+  }
+}
+</style>

src/router.js

@@ -96,6 +96,7 @@ const router = new Router({
 });
 
 router.beforeEach(async (to, from, next) => {
+  store.commit('ui/setLoading');
   store.commit('criticalError/clearError');
   if (to.matched.length === 0) {
     store.dispatch('criticalError/createError', {
@@ -134,4 +135,9 @@ router.beforeEach(async (to, from, next) => {
   next();
 });
 
+// eslint-disable-next-line no-unused-vars
+router.afterEach(async (to, from) => {
+  store.commit('ui/clearLoading');
+});
+
 export default router;

src/store/index.js

@@ -11,6 +11,7 @@ import emailConfirmations from './modules/emailConfirmations';
 import memberIntroduction from './modules/memberIntroduction';
 import editUser from './modules/editUser';
 import invitation from './modules/invitation';
+import ui from './modules/ui';
 
 Vue.use(Vuex);
 
@@ -27,6 +28,7 @@ export default new Vuex.Store({
     memberIntroduction,
     editUser,
     invitation,
+    ui,
   },
   plugins: [
     createPersistedState({

src/store/modules/ui/index.js

@@ -0,0 +1,16 @@
+export default {
+  namespaced: true,
+  state: {
+    isLoading: false,
+  },
+  /* eslint-disable no-param-reassign */
+  mutations: {
+    setLoading(state) {
+      state.isLoading = true;
+    },
+    clearLoading(state) {
+      state.isLoading = false;
+    },
+  },
+  /* eslint-enable no-param-reassign */
+};