Odd change detection behavior Angular 2+

Hello I am working on a big application and I am having some issues with change detection. I will try to explain my setup as best as possible.

Parent Component ts:

Using changeDetection: ChangeDetectionStrategy.OnPush

I have a variable that is an observable

loaderOverlay$: Observable<boolean>;

this.loaderOverlay$ = this.store.pipe(
  select(selectors.loaderOverlaySelector)
);

This variable gets updated from an rxjs action from a child component. Then goes through the rxjs process. (Action -> Reducer -> Selector)

Parent Component HTML

<div *ngif="(loaderOverlay$ | async)"></div>

Child #1 Component (where im dispatching my action):

myFunction() {
  this.store.dispatch(new actions.LoaderOverlay(true));
}

---

My issue is that once I dispatch the action, the *ngif is very shaky. It doesn't seem to work the way I want it to (dispatch the action, change the value to true so the div appears). It's very strange because if I console.log(action.payload) in the reducer, the value is actually being updated, but the *ngif isn't working. And whats even stranger is when I hover over some other component, it seems to kick in.

I've spent alot of time on this and I think I've narrowed it down to change detection because in the parent component if I do:

ngAfterViewChecked(){
   this.changeDetector.detectChanges();
}

It seems to work for me. My issue with this is that ngAfterViewChecked seems to get triggered a massive amount of times and I'm afraid of performance issues.

Has anyone experienced this issue before? Or does anyone have any suggestions as to what is going on and what I can do to fix this strange issue?

Thanks!

from Odd change detection behavior Angular 2+