From 9f5130d06b3d449dd16d33ee5e41c820d037e2c4 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@outlook.fr>
Date: Mon, 3 Jul 2023 19:14:17 +0800
Subject: [PATCH] fix(nuxt): stop loading indicator on navigation failure
 (#21751)

---
 .../src/app/components/nuxt-loading-indicator.ts  | 11 +++++++++++
 packages/nuxt/src/pages/runtime/plugins/router.ts |  5 ++++-
 test/basic.test.ts                                |  9 +++++++++
 .../extends/node_modules/foo/layouts/default.vue  |  1 +
 test/fixtures/basic/pages/index.vue               |  6 ++++++
 .../basic/pages/middleware-abort-non-fatal.vue    | 15 +++++++++++++++
 6 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/basic/pages/middleware-abort-non-fatal.vue

diff --git a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
index b3818e90f2..f954244965 100644
--- a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
+++ b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
@@ -37,13 +37,24 @@ export default defineComponent({
     const router = useRouter()
 
     globalMiddleware.unshift(indicator.start)
+    router.onError(() => {
+      indicator.finish()
+    })
     router.beforeResolve((to, from) => {
       if (to === from || to.matched.every((comp, index) => comp.components && comp.components?.default === from.matched[index]?.components?.default)) {
         indicator.finish()
       }
     })
+
+    router.afterEach((_to, _from, failure) => {
+      if (failure) {
+        indicator.finish()
+      }
+    })
+
     nuxtApp.hook('page:finish', indicator.finish)
     nuxtApp.hook('vue:error', indicator.finish)
+
     onBeforeUnmount(() => {
       const index = globalMiddleware.indexOf(indicator.start)
       if (index >= 0) {
diff --git a/packages/nuxt/src/pages/runtime/plugins/router.ts b/packages/nuxt/src/pages/runtime/plugins/router.ts
index 4efeb84616..9d63a966e6 100644
--- a/packages/nuxt/src/pages/runtime/plugins/router.ts
+++ b/packages/nuxt/src/pages/runtime/plugins/router.ts
@@ -175,7 +175,10 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
               return false
             }
           }
-          if (result || result === false) { return result }
+
+          if (result || result === false) {
+            return result
+          }
         }
       }
     })
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 60a94954f6..7b28c950e4 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -168,6 +168,15 @@ describe('pages', () => {
     await expectNoClientErrors('/not-found')
   })
 
+  it('expect no loading indicator on middleware abortNavigation', async () => {
+    const { page } = await renderPage('/')
+    await page.waitForLoadState('networkidle')
+    await page.locator('#middleware-abort-non-fatal').click()
+    expect(await page.locator('#lodagin-indicator').all()).toHaveLength(0)
+    await page.locator('#middleware-abort-non-fatal-error').click()
+    expect(await page.locator('#lodagin-indicator').all()).toHaveLength(0)
+  })
+
   it('should render correctly when loaded on a different path', async () => {
     const page = await createPage('/proxy')
 
diff --git a/test/fixtures/basic/extends/node_modules/foo/layouts/default.vue b/test/fixtures/basic/extends/node_modules/foo/layouts/default.vue
index 1627862189..671b27180f 100644
--- a/test/fixtures/basic/extends/node_modules/foo/layouts/default.vue
+++ b/test/fixtures/basic/extends/node_modules/foo/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NuxtLoadingIndicator id="loading-indicator" />
     <div>Extended layout from foo</div>
     <NuxtPage />
   </div>
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
index c971c966d7..dd817783a6 100644
--- a/test/fixtures/basic/pages/index.vue
+++ b/test/fixtures/basic/pages/index.vue
@@ -29,6 +29,12 @@
     <NuxtLink to="/chunk-error" :prefetch="false">
       Chunk error
     </NuxtLink>
+    <NuxtLink id="middleware-abort-non-fatal" to="/middleware-abort-non-fatal" :prefetch="false">
+      Middleware abort navigation
+    </NuxtLink>
+    <NuxtLink id="middleware-abort-non-fatal-error" to="/middleware-abort-non-fatal?error=someerror" :prefetch="false">
+      Middleware abort navigation with error
+    </NuxtLink>
     Some value: {{ someValue }}
     <button @click="someValue++">
       Increment state
diff --git a/test/fixtures/basic/pages/middleware-abort-non-fatal.vue b/test/fixtures/basic/pages/middleware-abort-non-fatal.vue
new file mode 100644
index 0000000000..65031af979
--- /dev/null
+++ b/test/fixtures/basic/pages/middleware-abort-non-fatal.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    you should not see me
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: [
+    (to) => {
+      return abortNavigation(to.query.error ? new Error(to.query.error.toString()) : undefined)
+    }
+  ]
+})
+</script>