Fix app loader

resources/js/components/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app" class="bg-white dark:bg-notion-dark">
-    <!--    <loading v-show="!isIframe" ref="loading" />-->
+    <loading v-show="!isIframe" ref="loading" />
 
     <!--    <hotjar />-->
     <amplitude />
@@ -103,16 +103,6 @@ export default {
     }
   },
 
-  watch: {
-  },
-
-  mounted () {
-    // // Make it globally accessible
-    // const app = getCurrentInstance().appContext
-    // app.config.globalProperties.$loading = this.$refs.loading
-    // console.log(app.config.globalProperties.$loading)
-  },
-
   methods: {
     workspaceAdded () {
       this.$router.push({ name: 'home' })

resources/js/components/Loading.vue

@@ -10,77 +10,21 @@
 
 <script>
 // https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-loading.vue
+import { mapState } from 'vuex'
+
 export default {
   data: () => ({
-    percent: 0,
-    show: false,
-    canSuccess: true,
-    duration: 3000,
     height: '2px',
     color: '#77b6ff',
     failedColor: 'red'
   }),
 
-  methods: {
-    start () {
-      this.show = true
-      this.canSuccess = true
-      if (this._timer) {
-        clearInterval(this._timer)
-        this.percent = 0
-      }
-      this._cut = 10000 / Math.floor(this.duration)
-      this._timer = setInterval(() => {
-        this.increase(this._cut * Math.random())
-        if (this.percent > 95) {
-          this.finish()
-        }
-      }, 100)
-      return this
-    },
-    set (num) {
-      this.show = true
-      this.canSuccess = true
-      this.percent = Math.floor(num)
-      return this
-    },
-    get () {
-      return Math.floor(this.percent)
-    },
-    increase (num) {
-      this.percent = this.percent + Math.floor(num)
-      return this
-    },
-    decrease (num) {
-      this.percent = this.percent - Math.floor(num)
-      return this
-    },
-    finish () {
-      this.percent = 100
-      this.hide()
-      return this
-    },
-    pause () {
-      clearInterval(this._timer)
-      return this
-    },
-    hide () {
-      clearInterval(this._timer)
-      this._timer = null
-      setTimeout(() => {
-        this.show = false
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.percent = 0
-          }, 200)
+  computed: {
+    ...mapState({
+      percent: state => state.app.loader.percent,
+      canSuccess: state => state.app.loader.canSuccess,
+      show: state => state.app.loader.show
     })
-      }, 500)
-      return this
-    },
-    fail () {
-      this.canSuccess = false
-      return this
-    }
   }
 }
 </script>

resources/js/router/index.js

@@ -2,8 +2,7 @@ import routes from './routes'
 import { createWebHistory, createRouter } from 'vue-router'
 import * as Sentry from '@sentry/vue'
 import store from '../store'
-import { defineComponent } from 'vue'
-// import { nextTick } from '@vue/compat'
+import { defineComponent, nextTick } from 'vue'
 
 // The middleware for every page of the application.
 const globalMiddleware = ['check-auth', 'notion-connection']
@@ -76,7 +75,7 @@ async function beforeEach (to, from, next) {
 
   // Start the loading bar.
   if (components[components.length - 1].loading !== false) {
-    // nextTick(() => router.app.$loading.start())
+    nextTick(() => store.commit('app/loaderStart'))
   }
 
   // Get the middleware for all the matched components.
@@ -107,8 +106,7 @@ async function beforeEach (to, from, next) {
  * @param {Function} next
  */
 async function afterEach (to, from, next) {
-  // await nextTick()
-  // router.app.$loading.finish()
+  nextTick(() => store.commit('app/loaderFinish'))
 }
 
 /**
@@ -125,9 +123,9 @@ function callMiddleware (middleware, to, from, next) {
   const _next = (...args) => {
     // Stop if "_next" was called with an argument or the stack is empty.
     if (args.length > 0 || stack.length === 0) {
-      // if (args.length > 0) {
-      //   router.app.$loading.finish()
-      // }
+      if (args.length > 0) {
+        store.commit('app/loaderFinish')
+      }
 
       return next(...args)
     }

resources/js/store/modules/app.js

@@ -1,9 +1,73 @@
+import { nextTick } from 'vue'
+
 export const state = {
-  layout: 'default'
+  layout: 'default',
+
+  // App Loader
+  loader: {
+    percent: 0,
+    show: false,
+    canSuccess: true,
+    duration: 3000,
+    _timer: null,
+    _cut: null
+  }
 }
 
 export const mutations = {
   setLayout (state, layout) {
     state.layout = layout ?? 'default'
+  },
+  loaderStart (state) {
+    state.loader.show = true
+    state.loader.canSuccess = true
+    if (state.loader._timer) {
+      clearInterval(state.loader._timer)
+      state.loader.percent = 0
+    }
+    state.loader._cut = 10000 / Math.floor(state.loader.duration)
+  },
+  loaderIncrease (state, num) {
+    state.loader.percent = state.loader.percent + Math.floor(num)
+  },
+  loaderDecrease (state, num) {
+    state.loader.percent = state.loader.percent - Math.floor(num)
+  },
+  loaderFinish (state) {
+    state.loader.percent = 100
+    mutations.loaderHide(state)
+  },
+  loaderSetTimer (state, timerVal) {
+    state._timer = timerVal
+  },
+  loaderPause (state) {
+    clearInterval(state.loader._timer)
+  },
+  loaderHide (state) {
+    clearInterval(state.loader._timer)
+    state.loader._timer = null
+    setTimeout(() => {
+      state.loader.show = false
+      nextTick(() => {
+        setTimeout(() => {
+          state.loader.percent = 0
+        }, 200)
+      })
+    }, 500)
+  },
+  loaderFail () {
+    state.loader.canSuccess = false
+  }
+}
+
+export const actions = {
+  loaderStart ({ commit, dispatch }) {
+    mutations.loaderStart()
+    mutations.loaderSetTimer(setInterval(() => {
+      mutations.loaderIncrease(state.loader._cut * Math.random())
+      if (state.loader.percent > 95) {
+        mutations.loaderFinish()
+      }
+    }, 100))
   }
 }