diff --git a/.vitepress/theme/composables/nprogress.ts b/.vitepress/theme/composables/nprogress.ts index bf110897a..f1cf59620 100644 --- a/.vitepress/theme/composables/nprogress.ts +++ b/.vitepress/theme/composables/nprogress.ts @@ -1,25 +1,30 @@ -import nprogress, { type NProgress } from 'nprogress' // Import NProgress library and its type definition -import type { EnhanceAppContext } from 'vitepress' // Import EnhanceAppContext type definition from VitePress +import { NProgress, type Configuration as NProgressConfiguration } from 'nprogress' +import type { EnhanceAppContext } from 'vitepress' -export function loadProgress(router: EnhanceAppContext['router']): NProgress { // Export a function called loadProgress that takes in a router object as an argument - if (typeof window === 'undefined') return // Return early if the window object is not defined +let nProgressInstance: NProgress | null = null - // Initialize NProgress with some custom configurations - setTimeout(() => { - nprogress.configure({ showSpinner: false }) +export function loadProgress(router: EnhanceAppContext['router']): NProgress { + if (typeof window === 'undefined') { + return { + start: () => {}, + done: () => {}, + configure: () => {}, + } as NProgress + } - // Set up event listeners for the router's onBeforeRouteChange and onAfterRouteChanged events - const cacheBeforeRouteChange = router.onBeforeRouteChange - const cacheAfterRouteChange = router.onAfterRouteChanged - router.onBeforeRouteChange = (to) => { - nprogress.start() // Start the NProgress bar when the user navigates to a new page - cacheBeforeRouteChange?.(to) // Call the original onBeforeRouteChange event handler - } - router.onAfterRouteChanged = (to) => { - nprogress.done() // Stop the NProgress bar after the route has changed - cacheAfterRouteChange?.(to) // Call the original onAfterRouteChanged event handler - } + if (!nProgressInstance) { + nProgressInstance = new NProgress((config: NProgressConfiguration) => { + config.showSpinner = false + }) + } + + router.onBeforeRouteUpdate(() => { + nProgressInstance.start() }) - return nprogress // Return the NProgress object + router.onAfterRouteUpdated(() => { + nProgressInstance.done() + }) + + return nProgressInstance }