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)
-        })
-      }, 500)
-      return this
-    },
-    fail () {
-      this.canSuccess = false
-      return this
-    }
+  computed: {
+    ...mapState({
+      percent: state => state.app.loader.percent,
+      canSuccess: state => state.app.loader.canSuccess,
+      show: state => state.app.loader.show
+    })
   }
 }
 </script>