Bugfix: Instant navs devtools was not showing the final Page Load state

packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-nav-cookie.ts

@@ -2,9 +2,9 @@
  * Cookie reading and subscription for the instant navigation devtools panel.
  *
  * The cookie value is a JSON array:
- *   [0]        — pending (waiting to capture)
- *   [1, null]  — captured MPA page load
- *   [1, { from, to }] — captured SPA navigation (from/to route trees)
+ *   [0, id]        — pending (waiting to capture)
+ *   [1, id, null]  — captured MPA page load
+ *   [1, id, { from, to }] — captured SPA navigation (from/to route trees)
  *
  * The "to" tree may be null initially and updated after the prefetch resolves.
  */

packages/next/src/next-devtools/dev-overlay/components/instant-navs/instant-navs-panel.tsx

@@ -44,7 +44,7 @@ export function InstantNavsPanel() {
     if (typeof cookieStore !== 'undefined') {
       cookieStore.set({
         name: COOKIE_NAME,
-        value: JSON.stringify([0, `p${Math.random()}`]),
+        value: JSON.stringify([0, `p${Math.random()}`, null]),
         path: '/',
       })
     }

test/development/app-dir/instant-navs-devtools/instant-navs-devtools.test.ts

@@ -37,6 +37,14 @@ describe('instant-nav-panel', () => {
     await browser.elementByCss('[data-instant-nav]').click()
   }
 
+  async function clickViewPageLoad(browser: Playwright) {
+    await browser
+      // TODO: Monitor if we need to increase timeouts for all *instant calls
+      .elementByCss('[data-instant-nav-refresh]', { timeout: 50 })
+      .click()
+    await waitForInstantModeCookie(browser)
+  }
+
   async function clickStartClientNav(browser: Playwright) {
     await browser
       // TODO: Monitor if we need to increase timeouts for all *instant calls
@@ -94,6 +102,22 @@ describe('instant-nav-panel', () => {
     await clearInstantModeCookie(browser)
   })
 
+  it('should show page load state after clicking Reload', async () => {
+    const browser = await next.browser('/target-page/my-post?search=foo')
+    await clearInstantModeCookie(browser)
+
+    await openInstantNavPanel(browser)
+
+    await clickViewPageLoad(browser)
+
+    await retry(async () => {
+      const text = await getInstantNavPanelText(browser)
+      expect(text).toContain('Page load')
+      expect(text).toContain('pre-rendered static UI')
+      expect(text).toContain('Continue rendering')
+    })
+  })
+
   it('should show client nav state after clicking Start and navigating', async () => {
     const targetPage = '/target-page/my-post?search=foo'
     const [browser] = await Promise.all([