Fix loading navigation with metadata and prefetch

packages/next/src/client/components/layout-router.tsx

@@ -450,10 +450,10 @@ function InnerLayoutRouter({
       // It's important that we mark this as resolved, in case this branch is replayed, we don't want to continously re-apply
       // the patch to the tree.
       childNode.lazyDataResolved = true
-
-      // Suspend infinitely as `changeByServerResponse` will cause a different part of the tree to be rendered.
-      use(unresolvedThenable) as never
     }
+    // Suspend infinitely as `changeByServerResponse` will cause a different part of the tree to be rendered.
+    // A falsey `resolvedRsc` indicates missing data -- we should not commit that branch, and we need to wait for the data to arrive.
+    use(unresolvedThenable) as never
   }
 
   // We use `useDeferredValue` to handle switching between the prefetched and

test/e2e/app-dir/navigation/app/metadata-await-promise/nested/loading.js

@@ -1,9 +1,3 @@
-'use client'
-import { useEffect } from 'react'
-
 export default function Loading() {
-  useEffect(() => {
-    window.shownLoading = true
-  }, [])
   return <div id="loading">Loading</div>
 }

test/e2e/app-dir/navigation/navigation.test.ts

@@ -864,16 +864,22 @@ describe('app dir - navigation', () => {
     it('should render the final state of the page with correct metadata', async () => {
       const browser = await next.browser('/metadata-await-promise')
 
-      await browser
-        .elementByCss("[href='/metadata-await-promise/nested']")
-        .click()
+      // dev doesn't trigger the loading boundary as it's not prefetched
+      if (isNextDev) {
+        await browser
+          .elementByCss("[href='/metadata-await-promise/nested']")
+          .click()
+      } else {
+        const loadingText = await browser
+          .elementByCss("[href='/metadata-await-promise/nested']")
+          .click()
+          .waitForElementByCss('#loading')
+          .text()
 
-      await retry(async () => {
-        // dev doesn't trigger the loading boundary as it's not prefetched
-        if (!isNextDev) {
-          expect(await browser.eval(`window.shownLoading`)).toBe(true)
-        }
+        expect(loadingText).toBe('Loading')
+      }
 
+      await retry(async () => {
         expect(await browser.elementById('page-content').text()).toBe('Content')
 
         expect(await browser.elementByCss('title').text()).toBe('Async Title')