Angular Change Detection is not triggered with nested ngFor

I am currently working on a larger Angular project with a NgRx Store. The app contains a infinite scrolling list that when reaching the end shows a few skeleton items that when the request is finished get pushed down by real items.

In one component we need a grouped/nested list which results in a nested *ngFor. Since this is recomended for working with NgRx the component uses ChangeDetectionStrategy.OnPush.

Now when loading the list values from the backend the list takes a very long time to update (and at times only updates when clicking inside the browser) even though the request has been already finished for a long time. My first guess would be that there is a problem with the change detection.

This is an excerpt of what my component looks like at the moment:

<ul cdkScrollable #groupList>
  <li *ngFor="let dayGroup of groupsWithSkeleton$ | ngrxPush | keyvalue: asIsOrder;
              let i = index;
              trackBy: trackByKey">
    <div>{{ dayGroup.key | date }}</div>
    <ul>
      <li *ngFor="let subGroup of dayGroup.value | keyvalue: asIsOrder;
                  let i = index;
                  trackBy: trackByKey">
        <!-- stuff -->
      </li>
    </ul>
  </li>
</ul>

private groups$: Observable<Groups> = this.store.select(
  Selectors.selectGroups
);

constructor(readonly store: Store<AppState>) {
  this.groupsWithSkeleton$ = combineLatest([
    this.groups$,
    this.isLoadingOrHasMoreItemsAvailable$
  ]).pipe(
    map(([groups, isLoadingOrHasMoreItemsAvailable]) => {
      const skeleton: Groups = isLoadingOrHasMoreItemsAvailable ? this.skeletonMap : new Map();
      return new Map([...groups, ...skeleton]);
    })
  );
  // [...] more assignments
}

I already kind of found a working solution, but I think it is rather ugly and I don't realy understand why this does not work in the first place. (It was still not perfectly fast but acceptable.)

The solution was to add this after the creation of the group with skeleton items:

tap(() => {
  changeDetectorRef.markForCheck();
  changeDetectorRef.detectChanges();
})

I also created a StackBlitz with a MWE: https://stackblitz.com/edit/angular-ivy-7ycaxv?file=src/app/app.component.ts

Maybe someone can help me to find the underlying problem and a better solution.