Using Suspense + Await to resolve deferred loader data breaks pending UI when navigating within the same route

[nramovs-sr]

Reproduction

Go to https://stackblitz.com/edit/remix-run-remix-hj7xu8?file=app%2Froutes%2F_common.tsx
Click (server:) "one"
Wait for deferred content to load (3 seconds)
Click (server:) "two"
Within the next 3 seconds (before deferred content loader) click (server:) "three"

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: * => 2.9.2 
    @remix-run/node: * => 2.9.2 
    @remix-run/react: * => 2.9.2 
    @remix-run/serve: * => 2.9.2 
    vite: ^5.1.0 => 5.3.1

Used Package Manager

npm

Expected Behavior

After clicking "two" page should update after 200ms
After clicking "three", NavLink for "two" should render it's unselected style, and NavLink for "three" should transition to "pending" state.

Actual Behavior

After clicking "two" page doesn't update until deferred value resolves
After clicking "three" NavLink stays in pending state for loading "two"

Repeating similar procedure for (client:) navigation, using clientLoader has the same behavior. Without any delay in clientLoader we can break pendingUI even faster:
Click (client:) "one"
Wait for deferred content to load (3 seconds)
Click (client:) "block"
-> Now NavLink doesn't transition to pending state, it goes directly to showing "block" as active, but after the 3 second delay to resolve the deferred value.

[brophdawg11]

Can you try putting a key on the Suspense boundary to make it specific to the location? I think I've seen this behavior before when React re-uses the same component tree across navigations between the same route with different params - it reuse's the Suspense boundary (due to lack of a key), doesn't re-fallback, and because it's in a startTransition under the hood it continues showing the old UI

<Suspense fallback="... loading ..." key={location.key}>