In Blazor Server Side show where changes were made
I have a list of sensors and as soon as new data arrives from a sensor I want the list entry to highlight/flash for one second or so. With that flash the user will be informed, that the sensor data has changed.
The sensor data arrives within an event and the UI refresh will be triggered by StateHasChanged.
Some thoughts: I had the idea to create a new class which has the senor data and a HasChanged property, but as I would like to use MatBlazorTables which uses foreach I am not able to change the HasChanged to false again after it renderes. The second thought I had was creating two lists, one with the "old" data and one with the new arrived data and then the razor-component looks where changes were made.
Are there simpler, cleaner solutions, maybe already embedded in Blazor I haven't discovered yet?
The simplest way to achieve this would be to use CSS animations - no C# or JS code required! (disclaimer: I'm not a CSS expert!)
Animations can be defined as a specific duration and repetition. When you add items to a Blazor list, Blazor adds them by diff'ing, so the existing items are not changed and so won't trigger the animation for new ones.
I've created a demo here: https://blazorfiddle.com/s/0qj50sch
Example
