feat(theme): add page load progress bar (#1264)

package.json

@@ -87,6 +87,7 @@
     "@vue/devtools-api": "^6.2.1",
     "@vueuse/core": "^9.1.1",
     "body-scroll-lock": "^4.0.0-beta.0",
+    "nprogress": "^0.2.0",
     "shiki": "^0.11.1",
     "vite": "^3.0.9",
     "vue": "^3.2.38"
@@ -120,6 +121,7 @@
     "@types/micromatch": "^4.0.2",
     "@types/minimist": "^1.2.2",
     "@types/node": "^18.7.14",
+    "@types/nprogress": "^0.2.0",
     "@types/polka": "^0.5.4",
     "@types/prompts": "^2.0.14",
     "chokidar": "^3.5.3",

src/client/app/router.ts

@@ -14,6 +14,8 @@ export interface Route {
 export interface Router {
   route: Route
   go: (href?: string) => Promise<void>
+  onBeforeRouteChange?: (to: string) => void | Promise<void>
+  onAfterRouteChanged?: (to: string) => void | Promise<void>
 }
 
 export const RouterSymbol: InjectionKey<Router> = Symbol()
@@ -39,7 +41,13 @@ export function createRouter(
 ): Router {
   const route = reactive(getDefaultRoute())
 
-  function go(href: string = inBrowser ? location.href : '/') {
+  const router: Router = {
+    route,
+    go
+  }
+
+  async function go(href: string = inBrowser ? location.href : '/') {
+    await router.onBeforeRouteChange?.(href)
     const url = new URL(href, fakeHost)
     if (siteDataRef.value.cleanUrls === 'disabled') {
       // ensure correct deep link so page refresh lands on correct files.
@@ -54,7 +62,8 @@ export function createRouter(
       history.replaceState({ scrollPosition: window.scrollY }, document.title)
       history.pushState(null, '', href)
     }
-    return loadPage(href)
+    await loadPage(href)
+    await router.onAfterRouteChanged?.(href)
   }
 
   let latestPendingPath: string | null = null
@@ -181,10 +190,7 @@ export function createRouter(
 
   handleHMR(route)
 
-  return {
-    route,
-    go
-  }
+  return router
 }
 
 export function useRouter(): Router {

src/client/theme-default/index.ts

@@ -6,10 +6,13 @@ import './styles/components/custom-block.css'
 import './styles/components/vp-code.css'
 import './styles/components/vp-doc.css'
 import './styles/components/vp-sponsor.css'
+import 'nprogress/nprogress.css'
+import './styles/lib-override/nprogress.css'
 
-import { Theme } from 'vitepress'
+import { Theme, inBrowser } from 'vitepress'
 import Layout from './Layout.vue'
 import NotFound from './NotFound.vue'
+import nprogress from 'nprogress'
 
 export { default as VPHomeHero } from './components/VPHomeHero.vue'
 export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
@@ -22,7 +25,17 @@ export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
 
 const theme: Theme = {
   Layout,
-  NotFound
+  NotFound,
+  enhanceApp: ({ router }) => {
+    if (inBrowser) {
+      router.onBeforeRouteChange = () => {
+        nprogress.start()
+      }
+      router.onAfterRouteChanged = () => {
+        nprogress.done(true)
+      }
+    }
+  }
 }
 
 export default theme

src/client/theme-default/styles/lib-override/nprogress.css

@@ -0,0 +1,12 @@
+#nprogress .bar {
+  background: var(--vp-c-brand);
+}
+
+#nprogress .spinner-icon {
+  border-top-color: var(--vp-c-brand);
+  border-left-color: var(--vp-c-brand);
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand);
+}

theme.d.ts

@@ -1,5 +1,6 @@
 // so that users can do `import DefaultTheme from 'vitepress/theme'`
 import type { ComponentOptions } from 'vue'
+import { EnhanceAppContext } from './dist/client/index.js'
 
 export const VPHomeHero: ComponentOptions
 export const VPHomeFeatures: ComponentOptions
@@ -13,6 +14,7 @@ export const VPTeamMembers: ComponentOptions
 declare const theme: {
   Layout: ComponentOptions
   NotFound: ComponentOptions
+  enhanceApp: EnhanceAppContext
 }
 
 export default theme