MudTable: Fix misaligned loading bar (#7576)

* Fixes #7573

* Removed redundant space

* Added remark to the docs.

src/MudBlazor.UnitTests.Viewer/TestComponents/Table/TableLoadingTest.razor

@@ -1,6 +1,8 @@
 @namespace MudBlazor.UnitTests.TestComponents
 
-<MudTable Items="@Elements" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" Filter="new Func<Element, bool>(FilterFunc)" Striped>
+<MudTable Items="@Elements" Hover="true" Breakpoint="Breakpoint.Sm"
+          Loading="@isLoading" Filter="new Func<Element, bool>(FilterFunc)" Striped
+          MultiSelection="@isMultiSelectionEnabled">
     <ToolBarContent>
         <MudTextField id="searchString" @bind-Value="searchString" Placeholder="Search"></MudTextField>
     </ToolBarContent>
@@ -18,16 +20,29 @@
         <MudTd DataLabel="Position">@context.Position</MudTd>
         <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
     </RowTemplate>
+     <RowEditingTemplate>
+         <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>
+     </RowEditingTemplate>
     <NoRecordsContent>No matching records found</NoRecordsContent>
     <LoadingContent>Loading...</LoadingContent>
 </MudTable>
 
-<MudSwitch id="switch" @bind-Checked="_loading">Show Loading</MudSwitch>
+<MudSwitch id="switch" @bind-Checked="isLoading">Show Loading</MudSwitch>
+<MudSwitch id="multi-selection" @bind-Checked="isMultiSelectionEnabled">Enable Multi-selection</MudSwitch>
 
-@code {
-    public static string __description__ = "When loading is set to true, a progress bar should appear in the table header, which would not affect the striped table.";
+ @code {
+    public static string __description__ = @"
+        When loading is set to true, a progress bar should appear in the table header,
+        which would not affect the striped table.
+        Dynamically added columns should not affect number of cells in the loader row.
+        ";
 
-    private bool _loading = false;
+    private bool isLoading = false;
+    private bool isMultiSelectionEnabled = false;
     private IEnumerable<Element> Elements = new List<Element>();
     private string searchString;
 

src/MudBlazor.UnitTests/Components/TableTests.cs

@@ -150,7 +150,47 @@ public void LoadingSwitchAddsRowToHeaderWithoutAffectingBody()
         }
 
         /// <summary>
-        /// Check if the loading and no records functionnality is working in grouped table.
+        /// Ensure that when the table loader is visible,
+        /// adding new columns dynamically such as multi-selection
+        /// will not affect the number of columns in the row with the loader.
+        /// </summary>
+        [Test]
+        public void DynamicColumnsDoNotAffectLoadingRow()
+        {
+            // Render the component
+            var comp = Context.RenderComponent<TableLoadingTest>();
+
+            // Ensure table initially has 6 columns
+            var headersRow = comp.FindAll("thead tr")[0];
+            headersRow.ChildElementCount.Should().Be(6);
+
+            // Toggle the loading switch to the 'loading' state
+            var loadingSwitch = comp.Find("#switch");
+            loadingSwitch.Change(true);
+
+            // Get the loader row which is second row in the thead
+            var loaderRow = comp.FindAll("thead tr")[1];
+
+            // Verify that loader row has one child which is a loader cell
+            var loaderCell = loaderRow.QuerySelector(".mud-table-loading");
+            loaderCell.IsOnlyChild();
+
+            // Toggle the multi-selection switch to the 'on' state
+            var multiSelectionSwitch = comp.Find("#multi-selection");
+            multiSelectionSwitch.Change(true);
+
+            // Ensure table has 7 columns
+            headersRow = comp.FindAll("thead tr")[0];
+            headersRow.ChildElementCount.Should().Be(7);
+
+            // Verify that loader row still has one child
+            // which is a loader cell
+            loaderCell = loaderRow.QuerySelector(".mud-table-loading");
+            loaderCell.IsOnlyChild();
+        }
+
+        /// <summary>
+        /// Check if the loading and no records functionality is working in grouped table.
         /// </summary>
         [Test]
         public void TableGroupLoadingAndNoRecordsTest()

src/MudBlazor/Components/Table/MudTable.razor

@@ -63,22 +63,22 @@
                         }
                         @if (Loading)
                         {
-                            <MudTHeadRow>
+                            <tr class="mud-table-row">
                                 <th colspan="1000" class="@(CurrentPageItems.Any() || LoadingContent is not null ? "mud-table-loading" : "")">
                                     <MudProgressLinear Color="@LoadingProgressColor" Class="mud-table-loading-progress" Indeterminate="true" />
                                 </th>
-                            </MudTHeadRow>
+                            </tr>
                         }
                     </thead>
                 }
                 else if (Loading)
                 {
                     <thead class="@HeadClassname">
-                        <MudTHeadRow>
+                        <tr class="mud-table-row">
                             <th colspan="1000" class="@(CurrentPageItems.Any() || LoadingContent is not null ? "mud-table-loading" : "")">
                                 <MudProgressLinear Color="@LoadingProgressColor" Class="mud-table-loading-progress" Indeterminate="true" />
                             </th>
-                        </MudTHeadRow>
+                        </tr>
                     </thead>
                 }
                 <tbody class="mud-table-body">

src/MudBlazor/Components/Table/MudTable.razor.cs

@@ -495,6 +495,10 @@ internal override void OnHeaderCheckboxClicked(bool checkedState)
         /// Table will await this func and update based on the returned TableData.
         /// Used only with ServerData
         /// </summary>
+        /// <remarks>
+        /// MudTable will automatically control loading animation visibility if ServerData is set.
+        /// See <see cref="MudTableBase.Loading"/>.
+        /// </remarks>
         [Parameter]
         [Category(CategoryTypes.Table.Data)]
         public Func<TableState, Task<TableData<T>>> ServerData { get; set; }