Non-blocking router resource cause jarring UI flash #70809

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

No

Description

The documentation for the new router resource says:

When moving between views (or reloading the same view with new parameters), switching abruptly to a loading skeleton can create a jarring UI flash.

The router automatically masks intermediate loading and reloading states of resolved resources while a navigation is pending.

This is true for blocking resources: the router doesn't expose null or undefined data to the component while the resource is loading.

However, when using a nonBlocking resource, the resource that is exposed to the component behaves like a traditional resource, thus causing the jarring UI flash: while the resource is loading, it loses its previous value.

IMHO, it should at least be consistent with the behavior we get when using blocking resources, so that the behavior of the application doesn't radically change when switching from blocking to non-blocking resources.
The resource could switch to the loading status, but still keep its old value.

That would allow the component to do whatever it wants:

• alternate between a loading indicator (when isLoading() returns true) and data (when isLoading() returns false) - which is the only possible behavior currently
• show the current data when hasValue() returns true
• show the current data when hasValue() returns true, and also a loading indicator when isLoading() returns true.

But I find the need to keep the current value while loading so frequent that Angular should provide a function or an option when creating the resource to do that.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-kralrzfs?file=src%2Fmain.ts

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Angular CLI       : 22.2.0-rc.0
Angular           : 22.2.0-rc.0
Node.js           : 24.19.0
Package Manager   : npm 11.17.0
Operating System  : darwin x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 22.2.0-rc.0       │ ^22.2.0-rc.0      │
│ @angular/cli              │ 22.2.0-rc.0       │ ^22.2.0-rc.0      │
│ @angular/common           │ 22.2.0-rc.0       │ ^22.2.0-next.0    │
│ @angular/compiler         │ 22.2.0-rc.0       │ ^22.2.0-next.0    │
│ @angular/compiler-cli     │ 22.2.0-rc.0       │ ^22.2.0-next.0    │
│ @angular/core             │ 22.2.0-rc.0       │ ^22.2.0-next.0    │
│ @angular/forms            │ 22.2.0-rc.0       │ ^22.2.0-next.0    │
│ @angular/platform-browser │ 22.2.0-rc.0       │ ^22.2.0-next.0    │
│ @angular/router           │ 22.2.0-rc.0       │ ^22.2.0-next.0    │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 6.0.3             │ ~6.0.2            │
│ vitest                    │ 5.0.1             │ ^5.0.0            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response