Tab title is reset for a moment when navigating to a dynamic page

[A1yks]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/focused-moser-hh9nk8

To Reproduce

1. Start the application usign npm run dev
2. Open sandbox preview in a new browser tab to be able to see the tab title
3. Click on a link that takes you to another page while looking at the tab title
4. If you did not notice the title reset, then refresh the page and do step 3 again

problem.mp4

Current vs. Expected behavior

Tab title shouldn't reset when navigating to another page

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Navigation

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

next dev (local), next start (local)

Additional context

I noticed that it doesn't happen when there is no loading.tsx file

[icyJoseph]

I noticed that it doesn't happen when there is no loading.tsx file

This was gonna be my first question.

More easily visible with watch expressions:

Screen.Recording.2024-05-17.at.13.34.57.mov

document.title becomes ''

I know of another issue that also goes away when there is no loading.tsx... 🤔

[Avik-creator]

I guess since you are using redirect.replace(), it might lead to changes in the DOM.

[A1yks]

I guess since you are using redirect.replace(), it might lead to changes in the DOM.

Why should it?

[Avik-creator]

@A1yks I am sorry for providing the wrong info, but as mentioned in the docs of Next.js:

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Similar thing is happening to you as well.

I have tested it with loading.js and without it.

More specifically you see the section mentioned above in the screenshot.

[A1yks]

@Avik-creator Yes, it is expected for page.js to replace the title from layout.js. The problem is while the page.js is loading, the title becomes empty for a while, as you could see from the video I attached