Radzen Datagrid seems to be loading twice

Question

I have a radzen datagrid on a Blazor Server side app, that seems to be loading twice, this is, when first opening the page all data flashes for half a second (I took a screenshot, the data is show, not a blank grid) and then it switched to loading a it takes about 2 seconds and then shows the content of the grid.

I have been using as per radzen examples the "IsLoading" property to fill up data, I'll put an abridged version of the datagrid and of my code to show what I have.

Razor section:

@page "/projectlist"
@page "/"



@inject ISqlData _db
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject NavigationManager navigationManager

@if (IsDetail == true)
{
    <ProjectDetail OnDetailShown="UpdateDetailView" CalendarPeriod="CalendarPeriod" Project="Project"></ProjectDetail>
}
else
{
    <h3><p class="text-center ">Project List</p></h3>

    <RadzenPanel Style="width: calc(100vw - 80px)">
        <RadzenDataGrid style="height: calc(100vh - 175px)" AllowPaging="true" AllowColumnResize="true" PageSize="20"  IsLoading="IsLoading" AllowSorting="true" ShowPagingSummary="true" AllowColumnReorder="true"  AllowMultiColumnSorting="true"  AllowFiltering="true" FilterMode="FilterMode.Simple" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@Projects" TItem="Project" >
            <Columns>
                <RadzenDataGridColumn TItem="Project" Property="ProjectNumber" Title="Project Number" Sortable="false" FilterOperator="FilterOperator.Contains"  Width="130px" Pickable="false" Frozen="true"  >
                    <Template Context="data"><RadzenButton Click=@(args => OnClick(data.ProjectId, data.ProjectStatus)) Shade="Shade.Dark" Text="@data.ProjectNumber" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Success" /></Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="Project" Property="Name" Title="Project Name" MinWidth="300px"  />
                <RadzenDataGridColumn TItem="Project" Property="ContractType" Title="Contract Type"  MinWidth="300px" />
                <RadzenDataGridColumn TItem="Project" Property="PtdUnbilled" Title="Beginning WIP Balance" FormatString="{0:0,0.00}"  TextAlign="TextAlign.Right" MinWidth="210px"   Width="210px"  />
            </Columns>
        </RadzenDataGrid>
    </RadzenPanel>
}

and Code section:

    public IEnumerable<Project> Projects;
    private Employee Employee { get; set; } = null!;
    private string PersonnelNo { get; set; } = null!;
    public string EmployeeAdName { get; set; }
    public CalendarPeriod CalendarPeriod { get; set; } = null!;
    public IEnumerable<ProjectWip> ProjectWipCalculations { get; set; }
    public bool IsDetail { get; set; }
    public Project Project { get; set; }
    public bool IsLoading { get; set; }
    
    
    protected override async Task  OnParametersSetAsync()
    {

    }

    
    protected override async Task OnInitializedAsync()
    {

        IsLoading = true;


        EmployeeAdName = (await AuthenticationStateProvider.GetAuthenticationStateAsync()).User.Identity!.Name!;
        CalendarPeriod = await _db.GetCalendarPeriodAsync();
        
        Employee = await _db.GetEmployeeDataAsync(EmployeeAdName);

        PersonnelNo = Employee.PersonnelNumber;

        Projects = await _db.GetProjectsAsync(PersonnelNo);

        var enumerable = Projects.ToList();
        var projectList = enumerable.Select(x => x.ProjectId).ToArray();

        ProjectWipCalculations = await _db.GetCurrentMonthWIPData(projectList, CalendarPeriod.PeriodFrom);

        foreach (var project in enumerable)
        {
            var projectWip = ProjectWipCalculations.FirstOrDefault(p => p.ProjectId == project.ProjectId);
            if (projectWip != null)
            {
                project.CurrMonthInvoiceTotal = projectWip.CurrMonthInvoiceTotal;
            }
        }
        IsLoading = false;
    }

    private void OnClick(int projectId, string projectStatus)
    {
        IsDetail = true;
        Project = Projects.First(x => x.ProjectId == projectId);
        Project.ProjectStatus = projectStatus;
    }

    private void UpdateDetailView()
    {
        IsDetail = false;
    }

If I remove the "IsLoading" property the only difference is that the grid flashess for half a second all filled and then it blanks for about 2 seconds and the is shown, the "IsLoading" just renders an animation in the middle for a bit.

I don't entirely understand what is happening, if maybe the grid is being filled and then the call is done again to fill it? (I have all code in OnInitializedAsync

I've added a small gif showing what I mean below

Answer 1

Thats not a radzen thing. Is because blazor, loads twice. That is because blazor first prerenders the page to show the user, and then loads the full page. If you want to disable this you can disable prerender of the blazor app.

How to disable Blazor server side pre-render?

The other solution is setting onload grid property to true by defaultt , and then in the event onAfterRender method if is first render set loading to false.