[AppDir] Page navigation with start transition is waiting for Suspended components

schemburkar commented 1 year ago

Verify canary release

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

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home Single Language
    Binaries:
      Node: 18.5.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.4-canary.5
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/vercel/next.js/files/10912131/poc-rsc.zip)

To Reproduce

Click the 'click me' button in the example.
'Please wait' text will appear
Eventually redirection/DOM update will happen and Both time stamps on the page will update

Describe the Bug

The page has dynamic content simulated via a 5 sec Promise. When navigating via router/navigation APIs, and using startTransition to show user progress of the nav the behavior is as follows:

Start Transition enables the loading state
Transition completes only when the Suspended component that renders after async Promise is complete

This is contrary to the browser page loading behavior where the async component is under suspense and page is shown quickly. The same behavior should be available when navigating using router and transitions.

POC poc-rsc.zip

Expected Behavior

The expected behavior is as follows:

Start Transition enables the loading state
Transition should complete when the page is available to render, excluding the async/Suspended components that are under suspense
If the async components are having a suspense boundary, the fallback should be visible
Once the suspended components are available to render, those should be updated.

Expected behavior sample:

For this example,

the page should not wait for 'Delayed content' completion.
the transition should complete with static content shown and the delayed content replaced by its suspense fallback 'loading' text.

Which browser are you using? (if relevant)

Latest

How are you deploying your application? (if relevant)

next dev

imownbey commented 1 year ago

I believe I am also seeing this

polnikale commented 1 year ago

Happened for me as well. I think the issue here is that you're not adding the loading.tsx file

schemburkar commented 1 year ago

Happened for me as well. I think the issue here is that you're not adding the loading.tsx file

@polnikale This has no effect on the bug. I have added loading.tsx, updated repro: poc-rsc2.zip

The expectation is that on clicking the button, the page transitions should complete immediately as all delayed content is wrapped in the suspense boundary.

vercel / next.js