diff --git a/src/App.vue b/src/App.vue index ba12d6b3133ee40232b27aa5c381d6e24d98d0db..07d32cf4e274835df75756c6b62f31b096076cea 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,11 +9,19 @@ <router-view></router-view> </v-container> </v-content> + <v-overlay + :value="isPageLoading" + > + <v-progress-circular + indeterminate + size="64" + ></v-progress-circular> + </v-overlay> </v-app> </template> <script> -import { mapGetters, mapActions } from 'vuex'; +import { mapState, mapGetters, mapActions } from 'vuex'; import NavigationBar from '@/components/NavigationBar.vue'; import NavigationDrawer from '@/components/NavigationDrawer.vue'; @@ -27,6 +35,9 @@ export default { }, computed: { + ...mapState([ + 'isPageLoading', + ]), ...mapGetters([ 'isLogin', ]), diff --git a/src/router/index.js b/src/router/index.js index b2d103e6f2d2b192c4b5df0161a5cc71407b0401..36412e30eaa6b79390119fcd98f07a5e8cbd5f29 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -27,6 +27,8 @@ const router = new VueRouter({ }); router.beforeEach(async (to, from, next) => { + Store.commit('setPageStartLoading'); + const res = await fetch(APISetting.endpoints.auth.check, APISetting.settings.get); if (res.status === 200) { const json = await res.json(); @@ -38,4 +40,8 @@ router.beforeEach(async (to, from, next) => { next(); }); +router.afterEach(() => { + Store.commit('setPageFinishLoading'); +}); + export default router; diff --git a/src/store/index.js b/src/store/index.js index 2370c13870f3252a99effc018889343cbc37ae48..e1c364d7b24f6d8c8666e5c32c1ff18c348c223a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -5,6 +5,7 @@ Vue.use(Vuex); export default new Vuex.Store({ state: { + isPageLoading: false, isNavDrawerVisible: true, loginUser: null, }, @@ -12,6 +13,12 @@ export default new Vuex.Store({ isLogin: state => (state.loginUser !== null), }, mutations: { + setPageStartLoading(state) { + state.isPageLoading = true; + }, + setPageFinishLoading(state) { + state.isPageLoading = false; + }, toggleNavDrawer(state) { state.isNavDrawerVisible = !state.isNavDrawerVisible; },