fix(nuxt): call page:loading:end only once with nested pages (#29009)

packages/nuxt/src/pages/runtime/page.ts

@@ -65,7 +65,7 @@ export default defineComponent({
     if (import.meta.dev) {
       nuxtApp._isNuxtPageUsed = true
     }
-
+    let pageLoadingEndHookAlreadyCalled = false
     return () => {
       return h(RouterView, { name: props.name, route: props.route, ...attrs }, {
         default: (routeProps: RouterViewSlotProps) => {
@@ -99,6 +99,7 @@ export default defineComponent({
           const key = generateRouteKey(routeProps, props.pageKey)
           if (!nuxtApp.isHydrating && !hasChildrenRoutes(forkRoute, routeProps.route, routeProps.Component) && previousPageKey === key) {
             nuxtApp.callHook('page:loading:end')
+            pageLoadingEndHookAlreadyCalled = true
           }
           previousPageKey = key
 
@@ -115,7 +116,14 @@ export default defineComponent({
             wrapInKeepAlive(keepaliveConfig, h(Suspense, {
               suspensible: true,
               onPending: () => nuxtApp.callHook('page:start', routeProps.Component),
-              onResolve: () => { nextTick(() => nuxtApp.callHook('page:finish', routeProps.Component).then(() => nuxtApp.callHook('page:loading:end')).finally(done)) },
+              onResolve: () => {
+                nextTick(() => nuxtApp.callHook('page:finish', routeProps.Component).then(() => {
+                  if (!pageLoadingEndHookAlreadyCalled) {
+                    return nuxtApp.callHook('page:loading:end')
+                  }
+                  pageLoadingEndHookAlreadyCalled = false
+                }).finally(done))
+              },
             }, {
               default: () => {
                 const providerVNode = h(RouteProvider, {

test/basic.test.ts

@@ -625,6 +625,44 @@ describe('pages', () => {
     const html = await $fetch('/prerender/test')
     expect(html).toContain('should be prerendered: true')
   })
+
+  it('should trigger page:loading:end only once', async () => {
+    const { page, consoleLogs } = await renderPage('/')
+
+    await page.getByText('to page load hook').click()
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, '/page-load-hook')
+    const loadingEndLogs = consoleLogs.filter(c => c.text.includes('page:loading:end'))
+    expect(loadingEndLogs.length).toBe(1)
+
+    await page.close()
+  })
+
+  it('should hide nuxt page load indicator after navigate back from nested page', async () => {
+    const LOAD_INDICATOR_SELECTOR = '.nuxt-loading-indicator'
+    const { page } = await renderPage('/page-load-hook')
+    await page.getByText('To sub page').click()
+    await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, '/page-load-hook/subpage')
+
+    await page.waitForSelector(LOAD_INDICATOR_SELECTOR)
+    let isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
+    expect(isVisible).toBe(true)
+
+    await page.waitForSelector(LOAD_INDICATOR_SELECTOR, { state: 'hidden' })
+    isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
+    expect(isVisible).toBe(false)
+
+    await page.goBack()
+
+    await page.waitForSelector(LOAD_INDICATOR_SELECTOR)
+    isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
+    expect(isVisible).toBe(true)
+
+    await page.waitForSelector(LOAD_INDICATOR_SELECTOR, { state: 'hidden' })
+    isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
+    expect(isVisible).toBe(false)
+
+    await page.close()
+  })
 })
 
 describe('nuxt composables', () => {
@@ -2738,7 +2776,7 @@ describe('teleports', () => {
     const html = await $fetch<string>('/nuxt-teleport')
 
     // Teleport is appended to body, after the __nuxt div
-    expect(html).toContain('<div><!--teleport start--><!--teleport end--><h1>Normal content</h1></div></div></div><span id="nuxt-teleport"><!--teleport start anchor--><div>Nuxt Teleport</div><!--teleport anchor--></span><script')
+    expect(html).toContain('<div><!--teleport start--><!--teleport end--><h1>Normal content</h1></div></div><!--]--></div><span id="nuxt-teleport"><!--teleport start anchor--><div>Nuxt Teleport</div><!--teleport anchor--></span><script')
   })
 })
 

test/fixtures/basic/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <NuxtLoadingIndicator :throttle="0" />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

test/fixtures/basic/pages/index.vue

@@ -94,6 +94,9 @@
     <NuxtLink to="/server-page">
       to server page
     </NuxtLink>
+    <NuxtLink to="/page-load-hook">
+      to page load hook
+    </NuxtLink>
   </div>
 </template>
 

test/fixtures/basic/pages/page-load-hook.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    Page for hook tests.
+    <NuxtLink to="/page-load-hook/subpage">
+      To sub page
+    </NuxtLink>
+    <NuxtPage />
+  </div>
+</template>

test/fixtures/basic/pages/page-load-hook/[slug].vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <NuxtLink to="/page-load-hook">
+      Back to parent
+    </NuxtLink>
+  </div>
+</template>

test/fixtures/basic/plugins/page-hook-plugin.ts

@@ -0,0 +1,8 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const route = useRoute()
+  nuxtApp.hook('page:loading:end', () => {
+    if (route.path === '/page-load-hook') {
+      console.log('page:loading:end')
+    }
+  })
+})