Logging out progressbar

resources/js/components/FilesView/ProcessingPopup.vue

@@ -1,13 +1,13 @@
 <template>
     <transition name="popup">
-        <div class="popup" v-if="isZippingFiles">
+        <div class="popup" v-if="processingPopup">
             <div class="popup-wrapper">
                 <div class="popup-content">
                     <div class="spinner-wrapper">
                         <Spinner/>
                     </div>
-                    <h1 class="title">{{ $t('popup_zipping.title') }}</h1>
-                    <p class="message">{{ $t('popup_zipping.message') }}</p>
+                    <h1 class="title">{{ processingPopup.title }}</h1>
+                    <p class="message">{{ processingPopup.message }}</p>
                 </div>
             </div>
         </div>
@@ -25,7 +25,7 @@ export default {
     },
     computed: {
         ...mapGetters([
-            'isZippingFiles'
+            'processingPopup'
         ])
     }
 }

resources/js/components/Others/Vignette.vue

@@ -12,10 +12,10 @@
         name: 'Vignette',
         computed: {
             ...mapGetters([
-                'isZippingFiles'
+                'processingPopup'
             ]),
             isVisible() {
-                return this.isZippingFiles || this.isVisibleVignette
+                return this.processingPopup || this.isVisibleVignette
             },
         },
         data() {

resources/js/store/modules/fileFunctions.js

@@ -6,13 +6,16 @@ import axios from 'axios'
 import Vue from 'vue'
 
 const defaultState = {
-	isZippingFiles: false,
+	processingPopup: undefined,
 }
 
 const actions = {
 	downloadFolder: ({commit, getters}, folder) => {
 
-		commit('ZIPPING_FILE_STATUS', true)
+		commit('PROCESSING_POPUP', {
+			title: i18n.t('popup_zipping.title'),
+			message: i18n.t('popup_zipping.message'),
+		})
 
 		// Get route
 		let route = getters.sharedDetail && !getters.sharedDetail.protected
@@ -27,7 +30,7 @@ const actions = {
 			Vue.prototype.$isSomethingWrong()
 		})
 		.finally(() => {
-			commit('ZIPPING_FILE_STATUS', false)
+			commit('PROCESSING_POPUP', undefined)
 		})
 
 	},
@@ -379,13 +382,13 @@ const actions = {
 }
 
 const mutations = {
-	ZIPPING_FILE_STATUS(state, status) {
-		state.isZippingFiles = status
+	PROCESSING_POPUP(state, status) {
+		state.processingPopup = status
 	}
 }
 
 const getters = {
-	isZippingFiles: state => state.isZippingFiles
+	processingPopup: state => state.processingPopup
 }
 
 export default {

resources/js/store/modules/userAuth.js

@@ -39,11 +39,18 @@ const actions = {
         })
     },
     logOut: ({getters, commit}) => {
+
+        let popup = setTimeout(() => {
+            commit('PROCESSING_POPUP', {
+                title: 'Logging Out',
+                message: 'Wait a second...',
+            })
+        }, 300)
+
         axios
             .get(getters.api + '/logout')
             .then(() => {
-
-                // Commit Remove Access Token from vuex storage
+                clearTimeout(popup)
                 commit('DESTROY_DATA')
 
                 router.push({name: 'SignIn'})

resources/js/views/Auth/SignIn.vue

@@ -208,6 +208,7 @@
         },
         created() {
             this.$scrollTop()
+            this.$store.commit('PROCESSING_POPUP', undefined)
         }
     }
 </script>