fix(nuxt): stop loading indicator on navigation failure (#21751)

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) {

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
+          }
         }
       }
     })

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')
 

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>

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

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>