Parallel Routes Loading UI Displaying Parent Loading

[bradleymcleish]

Link to the code that reproduces this issue

https://github.com/bradleymcleish/parallel-loading-issue

To Reproduce

1. Start the Application
2. Click on the Users link on the page
3. See that for a moment the loading UI for the page displays both on the left and on the right in the parallel route slot
4. This flicker happens on various different occasions including on router back

Current vs. Expected behavior

The loading UI for the current route displays for a moment in a flicker in the parallel route position. The loading UI should not show twice and it should not show in the parallel route position when navigating to the page with the parallel route not open/showing

Furthermore, even when having a Loading file in @drawer that returns null the loading flicker still occurs

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024
  Available memory (MB): 15803
  Available CPU cores: 16
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Parallel & Intercepting Routes

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

next dev (local), next build (local)

Additional context

No response

[zsombor-guti]

Can confirm, it also happens with full page routes (ie. having the routes /posts and /posts/123, when accessing the latter, the loading.js of the former gets displayed, then a flicker and the loading.js file of the latter gets displayed until the data is loaded).

Tested on both 14.1.4 and 14.2.3