Blazor 表在更新值时闪烁

Question

I am using blazor and I have a simple mechanism that send request and gets response(sending 1 request per second). And that response is mapped by event to such a simple model:

public class ResponseIdentyfication
{
    public int ResponseNumber { get; set; }
    public List<Identyfication> Identyfication { get; set; }
}

public class Identyfication
{
    public int Slot { get; set; }
    public string Type { get; set; }
    public State State { get; set; }
}

And that is send to razor template that looks like:

<table border="1">
    <thead>
        <tr>Status</tr>
    </thead>
    <tbody>
        @foreach (var responses in ResponseIdentyfication.Identyfication.ToArray())
        {
            <tr>
                <td>@responses.ResponseNumber </td>

                @foreach (var resp in @responses.Identyfication)
                {
                    <td class="resp-status-@resp.State">@resp.Type</td>
                }
            </tr>
        }
    </tbody>
</table>

Well it shows me what I want resp type and it sets it status as css class. Problem is when response arrive table is flickers on refresh data.

So my question Is how can I remove that flickering effect, so I will update only cell that changes.

Answer 1

You can try and improve the rendering performance by adding a @key attribute to your foreach loops.

https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#use-key-to-control-the-preservation-of-elements-and-components