如何在Blazor的MudTable中仅显示MudSkeleton作为数据加载占位

要实现加载数据前只显示MudSkeleton而不显示MudTable自带的加载动画，你可以通过以下两种方式处理：

方法一：通过CSS隐藏默认加载动画 #

保留Loading="true"以触发<LoadingContent>的显示，同时添加自定义CSS隐藏MudTable自带的加载指示器：

1. 在组件中添加样式：

<style>
/* 隐藏MudTable默认的加载动画 */
.custom-table .mud-table-loading-overlay {
    display: none !important;
}
</style>

2. 给MudTable添加自定义类custom-table：

<MudTable Elevation="0" MultiSelection="true" Hover="true" @bind-SelectedItems="_selectedItems"
ServerData="@(new Func<TableState, Task<TableData<PagedProductResponse>>>(ServerReloadAsync))" @ref="_table"
T="PagedProductResponse" @bind-CurrentPage="@PageNumber" @bind-RowsPerPage="@PageSize" Loading="true"
Class="custom-table">
<!-- 其余内容保持不变 -->
</MudTable>

这样设置后，Loading="true"会触发你的MudSkeleton显示，同时默认的加载动画被CSS隐藏，达到仅显示骨架的效果。

方法二：手动控制加载状态 #

使用本地变量控制加载状态，初始设为true，数据加载完成后设为false，通过条件渲染分别显示骨架和MudTable：

1. 在代码块中定义加载状态变量：

private bool _isLoading = true;

private async Task<TableData<PagedProductResponse>> ServerReloadAsync(TableState state)
{
    // 执行数据加载逻辑
    var data = await GetPagedProductsAsync(state);
    // 加载完成后关闭加载状态
    _isLoading = false;
    return data;
}

2. 在视图中条件渲染：

@if (_isLoading)
{
    <MudGrid Class="">
        <MudItem xs="12">
            <MudSkeleton Width="100%" Height="70px" Animation="Animation.Wave" />
        </MudItem>
        <MudItem xs="12">
            <MudSkeleton Width="100%" Height="70px" Animation="Animation.Wave" />
        </MudItem>
        <MudItem xs="12">
            <MudSkeleton Width="100%" Height="70px" Animation="Animation.Wave" />
        </MudItem>
    </MudGrid>
}
else
{
    <MudTable Elevation="0" MultiSelection="true" Hover="true" @bind-SelectedItems="_selectedItems"
    ServerData="@(new Func<TableState, Task<TableData<PagedProductResponse>>>(ServerReloadAsync))" @ref="_table"
    T="PagedProductResponse" @bind-CurrentPage="@PageNumber" @bind-RowsPerPage="@PageSize">
    <!-- 其余内容保持不变 -->
    </MudTable>
}

这种方式完全绕过MudTable的内置Loading机制，直接手动控制加载时的显示内容，灵活性更高。

内容的提问来源于stack exchange，提问作者Kalpana