Delay observable flow while BehaviorSubject value === false

Question

I've got an application that performs HTTP requests every 2 seconds and updates the view. Problem is, that I have to do some user-triggered CSS animations that take approximately one second and often get broken because Angular updates the DOM while the animation is running.

Im using Akita store and retrieving observables like so:

this.dosingVessels$ = this.dosingVesselsQuery.selectAll().pipe(*needs rxjs operator magic*);

and then displaying them in the component like so:

    <app-solving-vessel *ngFor="let vessel of solvingVessels$ | async"
                    [vessel]="vessel"
                    [ngClass]="{'animation-class': hoverId === vessel.id}">
    </app-solving-vessel>

How could I achieve that while the animation is ongoing:

animate(event, vessel) {
    this.updateView.next(false); // prevent from updating
    this.hoverId = vessel.id; // triggers animation
    timer(1000).subscribe(tick => this.updateView.next(true)); // allow normal updating
}

the view doesnt get updated.

I found out about delayWhen operator, but all examples are with timers and I'm not sure if it is the right way anyway.

Answer 1

Does debounce support your needs? You can pass it an Observable and your chain will wait until that Observable emits before continuing. If you need it to wait for a specific value, you need to use the filter operator as well.

I'm not sure where exactly in your code this is needed, but it may look like this:

this.dosingVesselsQuery.selectAll().pipe(
    debounce(() => 
        this.updateView
            .pipe(filter(val => val == true))
            .pipe(first())));

EDIT:

It seems your needs would better be supported by debounce. I've edited my post accordingly.