The most efficient way to apply frequent CSS changes in Angular 2

Question

The most efficient way to apply frequent CSS changes in Angular 2

We have an Angular 2 site with the websocket forwarded in the data from the backend to our grid. To indicate the latest updates, we use CSS to set the background color for the row and bold on the affected cells.

The indication should only last a short time.

1) Our first attempt was to reset all indicators when the next batch arrived from the server. This works well, but in some views it is rarely updated, which means that the indicators can remain very long, which is quite difficult.

It would be more consistent if the update indicators disappear after a fixed interval, for example 4 seconds.

2) Our next attempt was to use CSS animations. But after a while it was a lot. It seems that too many animations will overload the browser, unable to cope with the requested time. Maybe each animation has its own timer in the background?

3) The third attempt is for one timer to work at fixed intervals, and then check which entries to reset. We created TimerService, which will regularly check for the availability of relevant items. When you add an item to the timer pool, you can configure it with an arbitrary timeout.

This works, but there are frequent violation warnings in the log window:

[Violation] 'setInterval' handler took 56ms
[Violation] 'setInterval' handler took 74ms
[Violation] 'setInterval' handler took 63ms
[Violation] 'setInterval' handler took 88ms
...

But when we time what happens inside the checkItems method, it just takes 0.03ms!

# Angular . , -?
, ?
, ?
, ?

!

TimerService, :

import { Injectable, OnInit } from "@angular/core";
import { Observable } from "rxjs/Rx";
import { Subject } from "rxjs/Subject";

@Injectable()
export class TimerService {
    private timerItems: TimerItem[] = [];
    private dueTimeReachedSubject: Subject<string> = new Subject<string>();
    public dueTimeReached: Observable<string> = this.dueTimeReachedSubject.asObservable();

    constructor() {
        setInterval(() => this.checkItems(), 1000);
    }

    private checkItems() {
        let now = Date.now();
        let removeKeys: string[] = [];
        this.timerItems.filter(t => t.dueTime <= now).forEach(t => {
            this.dueTimeReachedSubject.next(t.key);
            removeKeys.push(t.key);
        });
        this.timerItems = this.timerItems.filter(t => removeKeys.indexOf(t.key) < 0);
    }

    public add(key: string, delayInSeconds: number) {
        let dueTime = Date.now() + delayInSeconds * 1000;
        let timerItem = this.timerItems.find(t => t.key === key);
        if (timerItem) {
            timerItem.dueTime = dueTime;
        }
        else {
            this.timerItems.push(new TimerItem(key, dueTime));
        }
    }   

    public remove(key: string) {
        this.timerItems = this.timerItems.filter(t => t.key !== key);
    }
}


class TimerItem {
    constructor(public key: string, public dueTime: number) { }
}