I’m encountering an issue that I can’t quite understand.
Here is a running TryMudBlazor example of the problem I’m trying to solve.
The Export button should be disabled whenever the table is loading data using the ServerData method. This code works fine, except during the very first loading process. The button remains enabled even though the table is in the loading state.
Can anyone help me find a logical explanation for why this is happening only during the initial loading? There is a very similar question(see MudTable Loading property set to false - loading indicator shows on ServerReload), but the suggested solutions do not solve my problem.
For convenience, here is the code from the TryMudBlazor example:
@using System.Text.Json.Serialization@using System.Threading<MudButton Disabled="@(_table is null || _table is not null && _table.Loading)" StartIcon="@Icons.Material.Outlined.Download">Export</MudButton><MudButton OnClick="@ReloadServerData">Reload</MudButton><MudTable T="Element" @ref="_table" ServerData="ServerReload" Dense="true" Hover="true"><ToolBarContent><MudText Typo="Typo.h6">Periodic Elements</MudText></ToolBarContent><HeaderContent><MudTh><MudTableSortLabel SortLabel="nr_field" T="Element">Nr</MudTableSortLabel></MudTh><MudTh><MudTableSortLabel SortLabel="sign_field" T="Element">Sign</MudTableSortLabel></MudTh><MudTh><MudTableSortLabel SortLabel="name_field" T="Element">Name</MudTableSortLabel></MudTh><MudTh><MudTableSortLabel SortLabel="position_field" T="Element">Position</MudTableSortLabel></MudTh><MudTh><MudTableSortLabel SortLabel="mass_field" T="Element">Molar mass</MudTableSortLabel></MudTh></HeaderContent><RowTemplate><MudTd DataLabel="Nr">@context.Number</MudTd><MudTd DataLabel="Sign">@context.Sign</MudTd><MudTd DataLabel="Name">@context.Name</MudTd><MudTd DataLabel="Position">@context.Position</MudTd><MudTd DataLabel="Molar mass">@context.Molar</MudTd></RowTemplate><NoRecordsContent><MudText>No matching records found</MudText></NoRecordsContent><LoadingContent><MudText>Loading...</MudText></LoadingContent><PagerContent><MudTablePager/></PagerContent></MudTable>@code { #nullable enable private MudTable<Element>? _table; private async Task<TableData<Element>> ServerReload(TableState state, CancellationToken token) { // Forward the provided token to methods which support it List<Element> data = []; // Simulate a long-running operation await Task.Delay(2300, token); // Get the total count var totalItems = data.Count; // Get the paged data var pagedData = data.Skip(state.Page * state.PageSize).Take(state.PageSize).ToList(); // Return the data return new TableData<Element> {TotalItems = totalItems, Items = pagedData}; } private Task ReloadServerData() => _table is null ? Task.CompletedTask : _table.ReloadServerData(); protected override void OnAfterRender(bool firstRender) { if (_table is not null) { var count = _table.TotalItems; } } public class Element { public string? Group { get; set; } public int Position { get; set; } public string? Name { get; set; } public int Number { get; set; } [JsonPropertyName("small")] public string? Sign { get; set; } public double Molar { get; set; } public IReadOnlyCollection<int>? Electrons { get; set; } /// <summary> /// Overriding Equals is essential for use with Select and Table because they use HashSets internally /// </summary> public override bool Equals(object? obj) => Equals(GetHashCode(), obj?.GetHashCode()); /// <summary> /// Overriding GetHashCode is essential for use with Select and Table because they use HashSets internally /// </summary> public override int GetHashCode() => Name?.GetHashCode() ?? 0; public override string ToString() => $"{Sign} - {Name}"; }}