Inconsistent behavior with loading state (loading.tsx) and useTransition

[JeromeDeLeon]

Link to the code that reproduces this issue

Codesandbox

To Reproduce

What I'm trying to do here is avoid showing a fallback UI when using useTransition on a page, but Next.js is still displaying it on the initial form submission even though I already wrapped the server action handler with a startTransition. 🤔

I remember something along that router cache automatically does this when you call a revalidatePath or revalidateTag inside a server action, but may I know why it is not suspending if I miss just one fallback UI down the page?

For instance, on the codesandbox link I provided, currently, it doesn't have a fallback UI on the root page and only on the subpage hence it will not suspend, but following the instruction below somehow suspends the page. 🤷🏼

1. Navigate to the /bug page
2. Submit the form
3. Notice that the form will not suspend
4. Rename the app/_loading.tsx to app/loading.tsx
5. Submit the form again
6. Notice that the form will suspend to the bug page loading boundary

Another weird thing is the page will also not be suspended if you do this

1. Rename the app/_loading.tsx to app/loading.tsx
2. Rename the app/bug/loading.tsx to app/bug/_loading.tsx
3. Make sure to do a full-page reload
4. Submit the form

Current vs. Expected behavior

The current behaviour suspends the page if you have a loading.tsx but only once. Any succeeding form submission will not suspend the page.

The expected behavior should not suspend the page. Still, assuming that I just missed something on the docs like router cache or something and it should be suspended, it should be consistent behavior regardless of loading.tsx files appearance. If I have loading.tsx on the / but not on the /bug, then it should use that as a fallback UI. 🤷🏼

Provide environment information

These specs came from codesandbox

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.3.0-canary.28 // Latest available version is detected (14.3.0-canary.28).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local), next build (local), next start (local)

Additional context

Interesting that useTransition doesn't affect the behavior. If I don't use startTransition, it does the same thing.

  setLoading(true);
  // startTransition(async () => {
  //   await onSubmit({ id: currentUser.id, test: "hello" });
  // });
  await onSubmit({ id: currentUser.id, test: "hello" });
  setLoading(false);

But then how do I monitor and display some pending messages and avoid suspension at the same time on initial form submission? 🤔

[JeromeDeLeon]

I managed to get it working by deep diving into Vercel issues and found this explanation.