Duplicate Rendering with Parallel Routing

Why this is a good first issue

Issue involves complex Next.js parallel routing behavior with unclear root cause.

AI Summary

The issue involves duplicate rendering when using Next.js parallel routing, particularly when a modal is opened for the first time. The problem seems related to the `loading.tsx` file and occurs only on initial interactions. While there are workarounds, the root cause is unclear, and the issue affects multiple users.

Issue Description

Link to the code that reproduces this issue

https://github.com/03k64/nextjs-parallel-routes-bug-repro

To Reproduce

Run the linked project with npm run dev
Navigate to the resources page
Click on any of the three resources

Current vs. Expected behavior

I expect the modal (panel) to appear showing the selected resource. This does happen, but before the modal is shown the current (resources) page renders next to the existing page in its loading state. I have attached a screen recording showing this occurring. It only seems to happen the first time each item is opened.

https://github.com/vercel/next.js/assets/115069865/7ec21ebf-0530-4973-b12e-22e5e524c65c

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.17.1
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: 8.6.12
Relevant Packages:
  next: 13.5.5-canary.2
  eslint-config-next: 13.5.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

I have included my local environment information above. The issue is also present in the deployed version of the original application which is deployed using the node/alpine Docker container using standalone output mode.

GitHub Labels

bug