CODEWITHSUNDEEP
c#blazor
Wojciech Szabowicz
Wojciech Szabowicz

Reputation: 4198

Blazor table is flicking when updating values

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="[email protected]">@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.

Upvotes: 2

Views: 1566

Answers (1)

Postlagerkarte
Postlagerkarte

Reputation: 7117

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

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

Upvotes: 1

Related Questions