Known local workaround

In the app I can add the Input renderCallback to the RxFor loop and tell Angular's PendingTasks class (which is still in Developer Preview phase) to wait until the rendering is done.
Thanks to this the Angular's app won't be considered stable until RxFor finishes it's rendering of all elements.

*rxFor=".....; renderCallback: itemsRendered"

  itemsRendered = new Subject<Person[]>();
  pendingTasks = inject(PendingTasks);

  ngOnInit() {
    // Tell Angular to wait with considering the app as "stable"
    // until RxFor tells that all the items were rendered
    this.pendingTasks.run(() => firstValueFrom(this.itemsRendered));
  }

See full commit on my workaround branch: Platonn/test-rx-angular-non-destructive-hydration@8698bcc

Idea for solution inside RxAngular framework:

For better DX, instead of me explicitly binding the RxFor's renderCallback to Angukar's PendingTasks in each and every of my components that use RxFor, ideally RxAngular library should bind them together under the hood in each instance of RxFor (and RxLet I guess too? and other directives that schedule rendering asynchronously).

Such a DX improvent is even more important, when I'd have nested *rxFor loops in a single component's HTML template - then for my workaround I'd need manually to create renderCallbacks for each and every nested rxFor instance myself and then wait for completion of each of them.

Analisys of Angular source code that led to those ideas

For reference, see also Angular's source code:

• Angular waits with destroying SSR-rendered DOM elements until the app is considered stable in whenStableWithTimeout
• whenStableWithTimeout waits at most 10s (timeout) until the app becomes stable
• in other words, it waits until ApplicationRef.isStable emits true for the first time
• and it happens when PendingTasksInternal.hasPendingTasks emits false for the first time
• and we can delay it explicitly by registering our own task via PendingTasks.add method (or more conveniently PendingTasks.run()

Note: let's not confuse Browser's macro tasks with Angular's tasks mentioned above. Angular's PendingTasks are just a list of "todo" jobs that needs to be finished until Angular considers the app to be stable.

FYI: I've created a feature request in Angular repo to promote PendingTasks class to stable API (becasue it's still in developer preview as of today) - angular/angular#60697

angular/angular#60716 will promote the PendingTasks to stable in v20.

@Platonn i'm deeply sorry to have you wait for so long. Thank you very much for the detailed issue description. I will have a look this week into it

yoyo @Platonn I actually could keep my promise. Please see the PR ;)