Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nuxt): start loading indicator state with middleware (#21003)

Browse Source
This commit is contained in:
Quentin 2023-06-16 16:47:20 +02:00 committed by GitHub
parent bcb3d7337b
commit 7e74e7c2fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/nuxt/src/app/components/nuxt-loading-indicator.ts
View File

@ -1,5 +1,9 @@
import { computed, defineComponent, h, onBeforeUnmount, ref } from 'vue' import { computed, defineComponent, h, onBeforeUnmount, ref } from 'vue'
import { useNuxtApp } from '#app/nuxt' import { useNuxtApp } from '#app/nuxt'
import { useRouter } from '#app/composables/router'
// @ts-expect-error virtual file
import { globalMiddleware } from '#build/middleware'
export default defineComponent({ export default defineComponent({
name: 'NuxtLoadingIndicator', name: 'NuxtLoadingIndicator',
@ -30,10 +34,20 @@ export default defineComponent({
// Hook to app lifecycle // Hook to app lifecycle
// TODO: Use unified loading API // TODO: Use unified loading API
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
nuxtApp.hook('page:start', indicator.start) const router = useRouter()
globalMiddleware.unshift(indicator.start)
router.beforeResolve((to, from) => {
if (to === from) {
indicator.finish()
}
})
nuxtApp.hook('page:finish', indicator.finish) nuxtApp.hook('page:finish', indicator.finish)
nuxtApp.hook('vue:error', indicator.finish) nuxtApp.hook('vue:error', indicator.finish)
onBeforeUnmount(indicator.clear) onBeforeUnmount(() => {
globalMiddleware.splice(globalMiddleware.indexOf(indicator.start, 1))
indicator.clear()
})
return () => h('div', { return () => h('div', {
class: 'nuxt-loading-indicator', class: 'nuxt-loading-indicator',