fix(theme): show progress bar after delay (#1278)

src/client/theme-default/index.ts

@@ -28,11 +28,24 @@ const theme: Theme = {
   NotFound,
   enhanceApp: ({ router }) => {
     if (inBrowser) {
+      let timeoutId: NodeJS.Timeout
+      let called = false
+
       router.onBeforeRouteChange = () => {
-        nprogress.start()
+        timeoutId = setTimeout(() => {
+          nprogress.start()
+          called = true
+        }, 500)
       }
+
       router.onAfterRouteChanged = () => {
-        nprogress.done(true)
+        if (timeoutId) {
+          clearTimeout(timeoutId)
+        }
+        if (called) {
+          nprogress.done(true)
+          called = false
+        }
       }
     }
   }

src/client/theme-default/support/utils.ts

@@ -13,12 +13,12 @@ export function isExternal(path: string): boolean {
 }
 
 export function throttleAndDebounce(fn: () => void, delay: number): () => void {
-  let timeout: any
+  let timeoutId: NodeJS.Timeout
   let called = false
 
   return () => {
-    if (timeout) {
-      clearTimeout(timeout)
+    if (timeoutId) {
+      clearTimeout(timeoutId)
     }
 
     if (!called) {
@@ -28,7 +28,7 @@ export function throttleAndDebounce(fn: () => void, delay: number): () => void {
         called = false
       }, delay)
     } else {
-      timeout = setTimeout(fn, delay)
+      timeoutId = setTimeout(fn, delay)
     }
   }
 }