Fix app loader

This commit is contained in:
Julien Nahum 2023-10-19 15:44:40 +02:00
parent be6bc867fe
commit d8c0371d43
4 changed files with 80 additions and 84 deletions

View File

@ -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' })

View File

@ -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>

View File

@ -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)
}

View File

@ -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))
}
}