Add loading states to MudDataGrid components

Implemented loading indicators and progress colors for all MudDataGrid instances across Events, Students, Teams, and Registration components to enhance user experience during data loading operations.

WebApp/Components/Features/Events/Index.razor

@@ -22,7 +22,9 @@
                  RowsPerPage="50"
                  Dense="true"
                  Striped="true"
-                 Hover="true">
+                 Hover="true"
+                 Loading="@_isLoading"
+                 LoadingProgressColor="Color.Primary">
         <Columns>
             <PropertyColumn Property="@(e => e.Name)" Title="Event Name" Sortable="true">
                 <CellTemplate>
@@ -71,10 +73,13 @@
 
 @code {
     MudDataGrid<EventDefinition> _dataGrid = null!;
+    private bool _isLoading = true;
 
     private async Task<GridData<EventDefinition>> ServerReload(GridState<EventDefinition> state)
     {
-
+        _isLoading = true;
+        try
+        {
             var query = Context.Events.OrderBy(e => e.Name).Where(state.FilterDefinitions).OrderBy(state.SortDefinitions);
 
             var totalItems = await query.CountAsync();
@@ -86,6 +91,11 @@
                 Items = pagedData
             };
         }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
 
     private async Task DeleteEventDefinition(EventDefinition evt)
     {

WebApp/Components/Features/Students/Index.razor

@@ -23,7 +23,9 @@
                  RowsPerPage="25"
                  Dense="true"
                  Striped="true"
-                 Hover="true">
+                 Hover="true"
+                 Loading="@_isLoading"
+                 LoadingProgressColor="Color.Primary">
         <Columns>
             <PropertyColumn Property="@(e => e.LastName)" Title="Name" Sortable="true">
                 <CellTemplate>
@@ -65,10 +67,13 @@
 
 @code {
     MudDataGrid<Student> _dataGrid = null!;
+    private bool _isLoading = true;
 
     private async Task<GridData<Student>> ServerReload(GridState<Student> state)
     {
-
+        _isLoading = true;
+        try
+        {
             var query = 
                 Context.Students.OrderBy(e => e.LastName)
                     .Where(state.FilterDefinitions).OrderBy(state.SortDefinitions);
@@ -82,6 +87,11 @@
                 Items = pagedData
             };
         }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
 
     private async Task DeleteStudent(Student student)
     {

WebApp/Components/Features/Students/Registration.razor

@@ -34,7 +34,7 @@
         </MudStack>
     </MudText>
 
-    <MudDataGrid T="StudentTeamInfo" ServerData="ServerReload" @ref="_dataGrid" @key="_gridKey" Filterable="true" RowsPerPage="35" Dense="true" Striped="true" Hover="true">
+    <MudDataGrid T="StudentTeamInfo" ServerData="ServerReload" @ref="_dataGrid" @key="_gridKey" Filterable="true" RowsPerPage="35" Dense="true" Striped="true" Hover="true" Loading="@_isLoading" LoadingProgressColor="Color.Primary">
     <Columns>
         <PropertyColumn Property="@(e => e.Student.LastName)" Title="Student" Sortable="true">
             
@@ -109,6 +109,7 @@
 
 @code {
     MudDataGrid<StudentTeamInfo> _dataGrid = null!;
+    private bool _isLoading = true;
     private bool _showRegionalOnly;
     private bool _showGrade;
     private bool _showRegionalId;
@@ -166,6 +167,9 @@
     }
 
     private async Task<GridData<StudentTeamInfo>> ServerReload(GridState<StudentTeamInfo> state)
+    {
+        _isLoading = true;
+        try
         {
             // Load all students with their teams
             var students = await Context.Students
@@ -197,6 +201,11 @@
                 Items = pagedData
             };
         }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
 
     /// <summary>
     /// Dictionary mapping column property names to their corresponding sort expressions.

WebApp/Components/Features/Teams/Index.razor

@@ -22,7 +22,9 @@
                  RowsPerPage="35"
                  Dense="true"
                  Striped="true"
-                 Hover="true">
+                 Hover="true"
+                 Loading="@_isLoading"
+                 LoadingProgressColor="Color.Primary">
         <Columns>
             <TemplateColumn Title="Event" Sortable="true" SortBy="@(t => t.Event.Name)">
                 <CellTemplate>
@@ -63,8 +65,12 @@
 
 @code {
     MudDataGrid<Team> _dataGrid = null!;
+    private bool _isLoading = true;
 
     private async Task<GridData<Team>> ServerReload(GridState<Team> state)
+    {
+        _isLoading = true;
+        try
         {
             var query 
                 = Context.Teams
@@ -85,6 +91,11 @@
                 Items = pagedData
             };
         }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
 
     private async Task DeleteTeam(Team team)
     {

docs/plans/style-improvements.md

@@ -127,7 +127,7 @@ This document outlines recommended style improvements to enhance the visual desi
 
 ---
 
-### 5. Add Loading States
+### 5. Add Loading States ✅ COMPLETED
 **Locations**: All MudDataGrid and async components
 
 **Issue**: No visual feedback during data loading operations.
@@ -331,7 +331,7 @@ Consider using MudChip components with rank colors for better visual distinction
 
 ### Phase 2: Visual Polish (Medium Impact, Medium Effort)
 4. ✅ Refine typography hierarchy usage
-5. Add loading states to all grids
+5. ✅ Add loading states to all grids
 6. ✅ Wrap pages in consistent container styling
 
 ### Phase 3: Enhancements (Nice to Have)