[Bug]: Button in dataGrid is not clickable for a few second on first load(flickering)

[danik121]

Blazorise Version

1.6

What Blazorise provider are you running on?

FluentUI2

Link to minimal reproduction or a simple code snippet

example in video https://github.com/user-attachments/assets/67778a34-84d3-4e60-b027-4c43043a109f

I use await dataGridRef.LoadState(state); when i remove it it works fine

Steps to reproduce

@page "/tests/datagrid/state"
<Row>
  <Column>
    <Card Margin="Margin.Is4.OnY">
      <CardHeader>
        <CardTitle>Datagrid: State Management</CardTitle>
      </CardHeader>
      <CardBody>
        <Paragraph>
          Our DataGrid allows you to save and load state.
          You can use the <code>LoadState</code> and <code>GetState</code> methods to load and get the DataGrid state.
        </Paragraph>
        <Paragraph>
          In the following example,
          <UnorderedList>
            <UnorderedListItem>we are using the <code>LoadState</code> method to load the DataGrid state from the LocalStorage if available.</UnorderedListItem>
            <UnorderedListItem>We are using the <code>GetState</code> method to save the DataGrid state to the LocalStorage in order to load at a later date.</UnorderedListItem>
            <UnorderedListItem>The page checks the LocalStorage on first render and loads the saved state if available.</UnorderedListItem>
          </UnorderedList>
        </Paragraph>
        <Paragraph>
          <Button Color="Color.Primary" Clicked="LoadState">Load State</Button>
          <Button Color="Color.Success" Clicked="SaveState">Save State</Button>
          <Button Color="Color.Light" Clicked="ResetState">Reset State</Button>
        </Paragraph>
      </CardBody>
      <CardBody>
        <DataGrid FixedColumns @ref="dataGridRef"
                  ColumnDisplayingChanged="@ColumnDisplayChanged"
                  TItem="Employee"
                  Data="@inMemoryData"
                  Editable="true"
                  ShowPager
                  PageSize="15"
                  Filterable="true"
                  Sortable="true"
                  Responsive="true"
                  FixedHeader="true"
                  FixedHeaderDataGridMaxHeight="calc(100vh - 175px)"
                  FixedHeaderDataGridHeight="calc(100vh - 175px)"
                  PagerPosition="DataGridPagerPosition.Top">
          <DataGridColumns>
            <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="60px" />
            <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name">
            </DataGridColumn>
            <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" />
            <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" />
            <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City">
              <DisplayTemplate>
                <Button Clicked="() => LoadState()">
                  @context.City
                </Button>
              </DisplayTemplate>
            </DataGridColumn>
            <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" Caption="Zip">
              <DisplayTemplate>
                <Button Clicked="() => NavigateTo()">
                  @context.Zip
                </Button>
              </DisplayTemplate>
            </DataGridColumn>
            <DataGridDateColumn TItem="Employee" Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable />
            <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" ReverseSorting="true" Editable Filterable="false" />
            <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
            <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Editable Width="140px" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End">
            </DataGridColumn>
            <DataGridCheckColumn TItem="Employee" Field="@nameof(Employee.IsActive)" Caption="Active" Editable Filterable="false">
              <DisplayTemplate>
                <Check TValue="bool" Checked="context.IsActive" Disabled ReadOnly />
              </DisplayTemplate>
            </DataGridCheckColumn>
          </DataGridColumns>
        </DataGrid>
      </CardBody>
    </Card>
  </Column>
</Row>

@code {
  [Inject] Blazored.LocalStorage.ILocalStorageService LocalStorage { get; set; }
  [Inject] EmployeeData EmployeeData { get; set; }
  [Inject] public NavigationManager NavigationManager { get; set; }
  private const string STORAGE_KEY = "__DATAGRID_STATE__";
  private DataGrid<Employee> dataGridRef;
  private IEnumerable<Employee> inMemoryData => EmployeeData.GetDataAsync().Result.Take(25);

  protected override async Task OnInitializedAsync()
  {
    // inMemoryData =
    await base.OnInitializedAsync();
  }

  protected async override Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      await LoadState();
    }
    await base.OnAfterRenderAsync(firstRender);
  }
  public async Task ColumnDisplayChanged(ColumnDisplayChangedEventArgs<Employee> args)
  {
    var state = await dataGridRef.GetState();
    await LocalStorage.SetItemAsync(STORAGE_KEY, state);
  }

  private async Task ResetState()
  {
    await LocalStorage.RemoveItemAsync(STORAGE_KEY);
    var state = new DataGridState<Employee>()
      {
        CurrentPage = 1,
        PageSize = 10,
      };
    await dataGridRef.LoadState(state);
  }

  private async Task LoadState()
  {
    var stateFromLocalStorage = await LocalStorage.GetItemAsync<DataGridState<Employee>>(STORAGE_KEY);

    if (stateFromLocalStorage is not null)
    {
      //It is of note that we must make sure the reference is contained in the DataGrid Data collection.
      if (stateFromLocalStorage.SelectedRow is not null)
      {
        stateFromLocalStorage.SelectedRow = inMemoryData.FirstOrDefault(x => x.Id == stateFromLocalStorage.SelectedRow.Id);
      }
      if (stateFromLocalStorage.EditItem is not null)
      {
        stateFromLocalStorage.EditItem = inMemoryData.FirstOrDefault(x => x.Id == stateFromLocalStorage.EditItem.Id);
      }
      await dataGridRef.LoadState(stateFromLocalStorage);
      return;
    }
  }

  public void NavigateTo()
  {
    NavigationManager.NavigateTo("/tests/datagrid/sort/single");
  }

  private async Task SaveState()
  {
    var state = await dataGridRef.GetState();
    await LocalStorage.SetItemAsync(STORAGE_KEY, state);
  }
}

What is expected?

click on button

What is actually happening?

button flickering and i have to wait when it stops then can i click on button

What browsers do you see the problem on?

No response

Any additional comments?

No response