title: Pause dispatching NgRx actions while animation is in progress
body: <p>I have a tiny application that displays a single dot on the screen.
  <a href="https://i.stack.imgur.com/Co85Y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Co85Y.png" alt="application screenshot"></a></p>
  
  <p>This is a simple div bound to state in NgRx store.</p>
  
  <pre><code>&lt;div class="dot"
     [style.width.px]="size$ | async"
     [style.height.px]="size$ | async"
     [style.backgroundColor]="color$ | async"
     [style.left.px]="x$ | async"
     [style.top.px]="y$ | async"
     (transitionstart)="transitionStart()"
     (transitionend)="transitionEnd()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The dot state changes are animated by CSS transitions.</p>
  
  <pre><code>.dot {
    border-radius: 50%;
    position: absolute;
  
    $moveTime: 500ms;
    $sizeChangeTime: 400ms;
    $colorChangeTime: 900ms;
    transition:
      top $moveTime, left $moveTime,
      background-color $colorChangeTime,
      width $sizeChangeTime, height $sizeChangeTime;
  }
  </code></pre>
  
  <p>I have a backend which pushes updates for the dot (position, color and size). I map these updates on NgRx actions.</p>
  
  <pre><code>export class AppComponent implements OnInit {
    ...
  
    constructor(private store: Store&lt;AppState&gt;, private backend: BackendService) {}
  
    ngOnInit(): void {
      ...
  
       this.backend.update$.subscribe(({ type, value }) =&gt; {
         // TODO: trigger new NgRx action when all animations ended
         if (type === 'position') {
           const { x, y } = value;
           this.store.dispatch(move({ x, y }));
         } else if (type === 'color') {
           this.store.dispatch(changeColor({ color: value }));
         } else if (type === 'size') {
           this.store.dispatch(changeSize({ size: value }));
         }
       });
     }
   }
  </code></pre>
  
  <p>The problem is that new changes from backend sometimes come earlier than animation ends.
  My objective is to delay updating the state in store (pause triggering new NgRx actions) until all transitions ended. We can easily handle this moment because chrome already supports the <code>transitionstart</code> event.</p>
  
  <p>I can also explain this with such a diagram
  <a href="https://i.stack.imgur.com/opEht.png" rel="noreferrer"><img src="https://i.stack.imgur.com/opEht.png" alt="spacing"></a></p>
  
  <p>The spacing depends on the transition duration.</p>
  
  <p>Here is the runnable application <a href="https://stackblitz.com/edit/angular-qlpr2g" rel="noreferrer">https://stackblitz.com/edit/angular-qlpr2g</a> and repo <a href="https://github.com/cwayfinder/pausable-ngrx" rel="noreferrer">https://github.com/cwayfinder/pausable-ngrx</a>.</p>