From 74504c583ed3d75ede8544b24585db8069d71b11 Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Mon, 9 Feb 2026 16:40:09 +0100
Subject: [PATCH] Improve loading UX with spinner and wider filter fields

Replaced plain loading text with a centered Bootstrap spinner in CatalogsGrid and MassDataGrid. Introduced hasLoaded flag for more accurate loading state handling. Increased min-width of filter input fields for better usability. Added .loading-container CSS for consistent spinner placement.
---
 .../Components/CatalogsGrid.razor             | 20 +++++++++++++++----
 .../Components/MassDataGrid.razor             | 20 +++++++++++++++----
 .../Components/CatalogsGrid.razor             | 20 +++++++++++++++----
 .../Components/MassDataGrid.razor             | 20 +++++++++++++++----
 4 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/DbFirst.BlazorWasm/Components/CatalogsGrid.razor b/DbFirst.BlazorWasm/Components/CatalogsGrid.razor
index 31fb68c..dc01844 100644
--- a/DbFirst.BlazorWasm/Components/CatalogsGrid.razor
+++ b/DbFirst.BlazorWasm/Components/CatalogsGrid.razor
@@ -86,8 +86,14 @@
         flex: 0 0 52px;
     }
     .filter-value {
-        min-width: 140px;
-        flex: 1 1 140px;
+        min-width: 160px;
+        flex: 1 1 160px;
+    }
+    .loading-container {
+        min-height: 160px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 </style>
 
@@ -100,9 +106,13 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
     <div class="alert alert-success" role="alert">@infoMessage</div>
 }
 
-@if (isLoading)
+@if (!hasLoaded || isLoading)
 {
-    <p><em>Lade Daten...</em></p>
+    <div class="loading-container">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Lade...</span>
+        </div>
+    </div>
 }
 else if (items.Count == 0)
 {
@@ -196,6 +206,7 @@ else
 @code {
     private List<CatalogReadDto> items = new();
     private bool isLoading;
+    private bool hasLoaded;
     private string? errorMessage;
     private string? infoMessage;
     private EditContext? editContext;
@@ -342,6 +353,7 @@ else
         finally
         {
             isLoading = false;
+            hasLoaded = true;
             StateHasChanged();
         }
     }
diff --git a/DbFirst.BlazorWasm/Components/MassDataGrid.razor b/DbFirst.BlazorWasm/Components/MassDataGrid.razor
index a8c4f2c..1b8b76d 100644
--- a/DbFirst.BlazorWasm/Components/MassDataGrid.razor
+++ b/DbFirst.BlazorWasm/Components/MassDataGrid.razor
@@ -113,8 +113,14 @@
         flex: 1 1 140px;
     }
     .filter-value-amount {
-        min-width: 110px;
-        flex-basis: 110px;
+        min-width: 140px;
+        flex-basis: 140px;
+    }
+    .loading-container {
+        min-height: 160px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 </style>
 
@@ -127,9 +133,13 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
     <div class="alert alert-success" role="alert">@infoMessage</div>
 }
 
-@if (isLoading)
+@if (!hasLoaded || isLoading)
 {
-    <p><em>Lade Daten...</em></p>
+    <div class="loading-container">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Lade...</span>
+        </div>
+    </div>
 }
 else if (items.Count == 0)
 {
@@ -248,6 +258,7 @@ else
 @code {
     private List<MassDataReadDto> items = new();
     private bool isLoading;
+    private bool hasLoaded;
     private string? errorMessage;
     private string? infoMessage;
     private int pageIndex;
@@ -346,6 +357,7 @@ else
         finally
         {
             isLoading = false;
+            hasLoaded = true;
             StateHasChanged();
         }
     }
diff --git a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
index 55c5290..a785c89 100644
--- a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
@@ -45,8 +45,14 @@
         flex: 0 0 52px;
     }
     .filter-value {
-        min-width: 140px;
-        flex: 1 1 140px;
+        min-width: 160px;
+        flex: 1 1 160px;
+    }
+    .loading-container {
+        min-height: 160px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 </style>
 
@@ -59,9 +65,13 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
     <div class="alert alert-success" role="alert">@infoMessage</div>
 }
 
-@if (isLoading)
+@if (!hasLoaded || isLoading)
 {
-    <p><em>Lade Daten...</em></p>
+    <div class="loading-container">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Lade...</span>
+        </div>
+    </div>
 }
 else if (items.Count == 0)
 {
@@ -155,6 +165,7 @@ else
 @code {
     private List<CatalogReadDto> items = new();
     private bool isLoading;
+    private bool hasLoaded;
     private string? errorMessage;
     private string? infoMessage;
     private EditContext? editContext;
@@ -301,6 +312,7 @@ else
         finally
         {
             isLoading = false;
+            hasLoaded = true;
             StateHasChanged();
         }
     }
diff --git a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
index c6a739c..b9b764c 100644
--- a/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
+++ b/DbFirst.BlazorWebApp/Components/MassDataGrid.razor
@@ -113,8 +113,14 @@
         flex: 1 1 140px;
     }
     .filter-value-amount {
-        min-width: 110px;
-        flex-basis: 110px;
+        min-width: 140px;
+        flex-basis: 140px;
+    }
+    .loading-container {
+        min-height: 160px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 </style>
 
@@ -127,9 +133,13 @@ else if (!string.IsNullOrWhiteSpace(infoMessage))
     <div class="alert alert-success" role="alert">@infoMessage</div>
 }
 
-@if (isLoading)
+@if (!hasLoaded || isLoading)
 {
-    <p><em>Lade Daten...</em></p>
+    <div class="loading-container">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Lade...</span>
+        </div>
+    </div>
 }
 else if (items.Count == 0)
 {
@@ -248,6 +258,7 @@ else
 @code {
     private List<MassDataReadDto> items = new();
     private bool isLoading;
+    private bool hasLoaded;
     private string? errorMessage;
     private string? infoMessage;
     private int pageIndex;
@@ -346,6 +357,7 @@ else
         finally
         {
             isLoading = false;
+            hasLoaded = true;
             StateHasChanged();
         }
     }