Description

When the Server-Side-Rendered HTML is initially displayed in the browser, everything is visible.
And then CSR kicks in, and RxFor cuts long rendering task into smaller tasks (as intended).
But unfortunately Angular doesn't wait until all of DOM elements are rendered by RxFor and Angular already considers the hydration as done and destroys the Server-Side-Rendered DOM elements which were not yet rendered in CSR by RxFor. Therefore RxFor indirectly causes the DOM elements to be destroyed and recreated only later incrementally in separate tasks.
This might affect negatively CLS because the incrementally arriving components can cause layout shifts.

Steps to Reproduce the Issue

See the minimal app reproduction repo:
https://github.com/Platonn/test-rx-angular-non-destructive-hydration

For more, see screenshots

Initial SSR HTML displayed:

... and then CSR kicks in, Angular destroys the DOM and RxFor renders DOM elements incrementally in separate tasks:

For reference, I'm attaching also an exported Performance trace from Chrome Dev Tools:
Trace-20250402T144018.json

Environment

@rx-angular/[email protected]

Angular CLI: 19.2.5
Node: 22.13.1
Package Manager: npm 10.9.2
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.5
@angular-devkit/build-angular   19.2.5
@angular-devkit/core            19.2.5
@angular-devkit/schematics      19.2.5
@angular/cli                    19.2.5
@angular/ssr                    19.2.5
@schematics/angular             19.2.5
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0