Merge pull request #158 from ProgrammingLab/kp/loading

NOW LOADING

Author: Fukusan64

src/App.vue

@@ -1,17 +1,20 @@
 <template>
   <div id="app">
     <error-page v-if="isError"/>
+    <loading-indicator class="loading"/>
     <router-view v-show="!isError"/>
   </div>
 </template>
 
 <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']),
@@ -24,13 +27,22 @@ export default {
 </script>
 
 <style>
-  html { height: 100%; }
-  body {
-    font-family: 'Noto Sans JP', sans-serif;
-    height: 100%;
-  }
+html {
+  height: 100%;
+}
 
-  #app {
-    height: 100%;
-  }
+body {
+  font-family: 'Noto Sans JP', sans-serif;
+  height: 100%;
+}
+
+#app {
+  height: 100%;
+}
+
+.loading {
+  position: fixed;
+  top: 0;
+  z-index: 127;
+}
 </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 */
+};