Defer is keeping application unstable, hydration cleanup not done until defer finished

[gboutte]

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

Don't known / other

Is this a regression?

No

Description

Problem

If you have an application with ssr enabled and your ssr is not rendering the same as the browser side, during the defer, you will have both information.

Details

I provided a git repository that show the problem.
To simplify I used the isBrowser to show an information.

<div>Is Browser = {{ isBrowserSide }}</div>
@if(isBrowserSide){
  <div>Inside if: browser bool = {{ isBrowserSide }}</div>
} @else{
  <div>Inside else: browser bool = {{ isBrowserSide }}</div>
}

If anywhere in the application there is a @defer, during the timing both parts ssr/ browser version will be shown.

In my example I used a timing of 20s

@defer {
  <app-defered/>
} @placeholder (minimum 20s){
  placeholder shown during 20s
}

And during the 20s I will see this:

Is Browser = true
Inside if: browser bool = true
Inside else: browser bool = false

Use case

This apply to some application that does not handle the user auth server side and only browser side.

For example your navbar is showing a "login" button when not connected. And when connected it's an "my account" button.

If you want to defer some heavy components while the components is loading both button will be show. Which is not ideal.

Explanation

I think it's because the hydration wait for any defered action started initially to be finished before cleaning up. It seem to be designed that way, so I don't know if it's a bug.

Maybe a solution would be a way to ask the defer to be ran after hydration / application stable.

Workaround

I found a workaround without using the defer, I waited for the application to be stable and then with a setTimeout waited some seconds to update a boolean to true, and my defered component is juste wrapped inside a @if

I made a stack overflow post about it: https://stackoverflow.com/questions/79500651/angular-hydration-waiting-for-defer-to-be-done-and-show-the-if-and-the-else

Please provide a link to a minimal reproduction of the bug

https://github.com/gboutte/angular-defer-keep-unstable.git

Please provide the exception or error you saw

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

Angular CLI: 18.2.14
Node: 20.18.3
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 18.2.13
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.14
@angular-devkit/build-angular   18.2.14
@angular-devkit/core            18.2.14
@angular-devkit/schematics      18.2.14
@angular/cli                    18.2.14
@angular/ssr                    18.2.14
@schematics/angular             18.2.14
rxjs                            7.8.2
typescript                      5.4.5
zone.js                         0.14.10

Anything else?

No response

[JoostK]

I believe this is essentially a duplicate of #58670 and #60218

[thePunderWoman]

I don't think it actually is a duplicate of those things, but it may be related. We currently rely on zones for timers and it's blocking of stability. So there's a potential fix for that part.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}