Updating a BehaviorSubject too quickly fails to trigger change detection

[londonshliach]

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

core

Is this a regression?

Yes

Description

I have an Angular component which contains a Loading spinner.
The spinner is toggled by a BehaviorSubject called loading$, which starts off as true, and is switched to false once the data is loaded from the service.

I noticed that if the service responds too quickly (if the data was previously loaded and cached,) then the loading spinner will not be removed from the template (even after the data is loaded and shows up in the template).

If I add even a small delay when loading the data, then the spinner will be removed as expected.

Here is an example with the bug:
https://stackblitz.com/edit/stackblitz-starters-kwjwgf?file=src%2Fmain.ts

Here is an example where a 1ms delay fixes the bug:
https://stackblitz.com/edit/stackblitz-starters-y1pt4w?file=src%2Fmain.ts

Please provide a link to a minimal reproduction of the bug

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

Please provide the exception or error you saw

No response

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

Angular CLI: 13.3.11
Node: 14.15.4
Package Manager: npm 9.6.5
OS: win32 x64

Angular: 13.3.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.6
@angular-devkit/build-angular   13.3.11
@angular-devkit/core            15.2.6
@angular-devkit/schematics      15.2.6
@angular/cdk                    13.3.9
@angular/cli                    13.3.11
@angular/fire                   7.6.1
@schematics/angular             13.3.11
rxjs                            6.6.7
typescript                      4.5.2

Anything else?

No response

[JoostK]

This is an ExpressionChangedAfterItHasBeenChecked scenario, where loaded$ emits during a change detection cycle and its prior value has already been observed in the template. It isn't reported as error due to using OnPush, please see #45612.

[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.}