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

fix(nuxt): do not register loading indicator hooks on server (#24052)

Browse Source
This commit is contained in:
Daniel Roe 2023-10-31 17:36:44 +01:00 committed by GitHub
parent 7500f27235
commit c4bb8f31d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,44 +28,46 @@ export default defineComponent({
}, },
setup (props, { slots }) { setup (props, { slots }) {
// TODO: use computed values in useLoadingIndicator // TODO: use computed values in useLoadingIndicator
const indicator = useLoadingIndicator({ const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
duration: props.duration, duration: props.duration,
throttle: props.throttle throttle: props.throttle
}) })
// Hook to app lifecycle if (import.meta.client) {
// TODO: Use unified loading API // Hook to app lifecycle
const nuxtApp = useNuxtApp() // TODO: Use unified loading API
const router = useRouter() const nuxtApp = useNuxtApp()
const router = useRouter()
globalMiddleware.unshift(indicator.start) globalMiddleware.unshift(start)
router.onError(() => { router.onError(() => {
indicator.finish() finish()
}) })
router.beforeResolve((to, from) => { router.beforeResolve((to, from) => {
if (!isChangingPage(to, from)) { if (!isChangingPage(to, from)) {
indicator.finish() finish()
} }
}) })
router.afterEach((_to, _from, failure) => { router.afterEach((_to, _from, failure) => {
if (failure) { if (failure) {
indicator.finish() finish()
} }
}) })
const unsubPage = nuxtApp.hook('page:finish', indicator.finish) const unsubPage = nuxtApp.hook('page:finish', finish)
const unsubError = nuxtApp.hook('vue:error', indicator.finish) const unsubError = nuxtApp.hook('vue:error', finish)
onBeforeUnmount(() => { onBeforeUnmount(() => {
const index = globalMiddleware.indexOf(indicator.start) const index = globalMiddleware.indexOf(start)
if (index >= 0) { if (index >= 0) {
globalMiddleware.splice(index, 1) globalMiddleware.splice(index, 1)
} }
unsubPage() unsubPage()
unsubError() unsubError()
indicator.clear() clear()
}) })
}
return () => h('div', { return () => h('div', {
class: 'nuxt-loading-indicator', class: 'nuxt-loading-indicator',
@ -77,10 +79,10 @@ export default defineComponent({
pointerEvents: 'none', pointerEvents: 'none',
width: 'auto', width: 'auto',
height: `${props.height}px`, height: `${props.height}px`,
opacity: indicator.isLoading.value ? 1 : 0, opacity: isLoading.value ? 1 : 0,
background: props.color || undefined, background: props.color || undefined,
backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`, backgroundSize: `${(100 / progress.value) * 100}% auto`,
transform: `scaleX(${indicator.progress.value}%)`, transform: `scaleX(${progress.value}%)`,
transformOrigin: 'left', transformOrigin: 'left',
transition: 'transform 0.1s, height 0.4s, opacity 0.4s', transition: 'transform 0.1s, height 0.4s, opacity 0.4s',
zIndex: 999999 zIndex: 999999