first commit

test/e2e/app-dir/app-prefetch-false-loading/app-prefetch-false-loading.test.ts

@@ -0,0 +1,44 @@
+import { nextTestSetup } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+describe('app-prefetch-false-loading', () => {
+  const { next, isNextDeploy } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should render loading for the initial render', async () => {
+    const $ = await next.render$('/en/testing')
+
+    expect($('#loading').text()).toBe('Loading...')
+  })
+  it('should not re-trigger loading state when navigating between pages that share a dynamic layout', async () => {
+    const logStartIndex = next.cliOutput.length
+
+    const browser = await next.browser('/en/testing')
+    let initialRandomNumber = await browser.elementById('random-number').text()
+    await browser.elementByCss('[href="/en/testing/test"]').click()
+    expect(await browser.hasElementByCssSelector('#loading')).toBeFalsy()
+
+    await check(
+      () => browser.hasElementByCssSelector('#nested-testing-page'),
+      true
+    )
+
+    const newRandomNumber = await browser.elementById('random-number').text()
+
+    expect(initialRandomNumber).toBe(newRandomNumber)
+
+    // Deploy doesn't have access to runtime logs. This assertion is also redundant since if
+    // the layout was re-fetched, the `no-store` on the random number would have resulted in a new value.
+    // Keeping this here for consistency with the original test.
+    if (!isNextDeploy) {
+      await check(() => {
+        const logOccurrences =
+          next.cliOutput.slice(logStartIndex).split('re-fetching in layout')
+            .length - 1
+
+        return logOccurrences
+      }, 1)
+    }
+  })
+})

test/e2e/app-dir/app-prefetch-false-loading/app/[lang]/layout.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+export default async function Root({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  console.log('re-fetching in layout')
+  const data = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    // ensure that we never show a cached value here to validate
+    // that navigating between segments is not refreshing the value
+    { cache: 'no-store' }
+  )
+  const randomNumber = await data.text()
+  return (
+    <div>
+      <p id="random-number">{randomNumber}</p>
+      {children}
+    </div>
+  )
+}

test/e2e/app-dir/app-prefetch-false-loading/app/[lang]/testing/client-component.tsx

@@ -0,0 +1,14 @@
+'use client'
+import React from 'react'
+import Link from 'next/link'
+
+export default function IndexPage() {
+  return (
+    <div>
+      On client
+      <Link href={'/en/testing/test'} prefetch={false}>
+        To /en/testing/test
+      </Link>
+    </div>
+  )
+}

test/e2e/app-dir/app-prefetch-false-loading/app/[lang]/testing/layout.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default async function Root({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div>
+      Nested Layout
+      {children}
+    </div>
+  )
+}

test/e2e/app-dir/app-prefetch-false-loading/app/[lang]/testing/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ClientComponent from './client-component'
+
+export default function IndexPage() {
+  return (
+    <div id="testing-page">
+      <p>Testing Page</p>
+      <ClientComponent />
+    </div>
+  )
+}

test/e2e/app-dir/app-prefetch-false-loading/app/[lang]/testing/test/client-component.tsx

@@ -0,0 +1,14 @@
+'use client'
+import React from 'react'
+import Link from 'next/link'
+
+export default function IndexPage() {
+  return (
+    <div>
+      On client
+      <Link href={'/en/testing'} prefetch={false}>
+        To /en/testing
+      </Link>
+    </div>
+  )
+}

test/e2e/app-dir/app-prefetch-false-loading/app/[lang]/testing/test/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ClientComponent from './client-component'
+
+export default function IndexPage() {
+  return (
+    <div id="nested-testing-page">
+      <p>Testing/Test Page</p>
+      <ClientComponent />
+    </div>
+  )
+}

test/e2e/app-dir/app-prefetch-false-loading/app/layout.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang={'en'}>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/app-prefetch-false-loading/app/loading.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function OuterLoading() {
+  return <div id="loading">Loading...</div>
+}