feat: Show loading indicator and disable add new button when tables a…

…re loading.
Brixel · Aug 18, 2022 · f755878 · f755878
1 parent 29d0487
commit f755878
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 37 deletions.
diff --git a/Queries/Members/Handlers/SearchMembers/SearchMembersHandler.cs b/Queries/Members/Handlers/SearchMembers/SearchMembersHandler.cs
@@ -1,12 +1,9 @@
 using System.Linq.Expressions;
 
-using AutoMapper;
 using AutoMapper.QueryableExtensions;
 
 using Domain;
 
-using MediatR;
-
 using Microsoft.EntityFrameworkCore;
 
 using Persistence;
@@ -45,7 +42,6 @@ public async Task<Paginated<MemberSummary>> Handle(SearchMembersQuery request, C
 
         var items = await memberSummaryQueryable.ToListAsync(cancellationToken: cancellationToken);
 
-
         return new Paginated<MemberSummary>
         {
             Items = items,

diff --git a/Queries/Transactions/Handlers/GetTransactionsHandler.cs b/Queries/Transactions/Handlers/GetTransactionsHandler.cs
@@ -1,12 +1,9 @@
 using System.Linq.Expressions;
 
-using AutoMapper;
 using AutoMapper.QueryableExtensions;
 
 using Domain;
 
-using MediatR;
-
 using Microsoft.EntityFrameworkCore;
 
 using Persistence;

diff --git a/Web/Pages/BankAccounts/BankAccounts.razor b/Web/Pages/BankAccounts/BankAccounts.razor
@@ -9,7 +9,8 @@
           Dense="true"
           Hover="true"
           @ref="table"
-          ServerData="@(new Func<TableState, Task<TableData<BankAccountDetail>>>(ServerReload))">
+          ServerData="@(new Func<TableState, Task<TableData<BankAccountDetail>>>(ServerReload))"
+          Loading="@loading">
     <ToolBarContent>
         <MudText Typo="Typo.h6">Bankaccounts</MudText>
         <MudSpacer />
@@ -27,7 +28,8 @@
                    DisableElevation="true"
                    Link="/bankaccounts/new"
                    Size="Size.Small"
-                   Variant="Variant.Filled">
+                   Variant="Variant.Filled"
+                   Disabled="@loading">
             Add bankaccount
         </MudButton>
     </ToolBarContent>
@@ -79,15 +81,15 @@
 @code {
     private MudTable<BankAccountDetail>? table;
     private string searchString = "";
-    private bool _isBusy = false;
+
+    // TODO: Keeping this local variable shouldn't be necessary 
+    // because the MudTable ServerData feature should take care of displaying the loading bar appropriately
+    // However due to https://github.com/MudBlazor/MudBlazor/issues/4662 this doesn't currently work
+    private bool loading = true;
 
     private async Task<TableData<BankAccountDetail>> ServerReload(TableState state)
     {
-    // Workaround for https://github.com/Garderoben/MudBlazor/issues/2070
-        if (_isBusy)
-            return new TableData<BankAccountDetail>();
-
-        _isBusy = true;
+        loading = true;
 
         BankAccountDetailOrderOption orderBy = state.SortLabel switch
         {
@@ -99,7 +101,7 @@
         var query = new SearchBankAccountsQuery(searchString, state.Page, state.PageSize, orderBy, sortDirection);
         var data = await _mediator.Send(query);
 
-        _isBusy = false;
+        loading = false;
         return new TableData<BankAccountDetail>()
         {
             TotalItems = data.Total,

diff --git a/Web/Pages/Members/Members.razor b/Web/Pages/Members/Members.razor
@@ -2,7 +2,6 @@
 @attribute [Authorize]
 
 @using MediatR
-@using Queries.Members
 @using Queries.Members.Handlers.SearchMembers
 @using Queries.Members.ViewModels
 
@@ -14,7 +13,8 @@
           Dense="true"
           Hover="true"
           @ref="table"
-          ServerData="@(new Func<TableState, Task<TableData<MemberSummary>>>(ServerReload))">
+          ServerData="@(new Func<TableState, Task<TableData<MemberSummary>>>(ServerReload))"
+          Loading="@loading">
     <ToolBarContent>
         <MudText Typo="Typo.h6">Members</MudText>
         <MudSpacer />
@@ -32,7 +32,8 @@
                    DisableElevation="true"
                    Link="/members/new"
                    Size="Size.Small"
-                   Variant="Variant.Filled">
+                   Variant="Variant.Filled"
+                   Disabled="@loading">
             Add member
         </MudButton>
     </ToolBarContent>
@@ -105,16 +106,15 @@
 @code {
     private MudTable<MemberSummary>? table;
     private string searchString = "";
-    private bool _isBusy = false;
+
+    // TODO: Keeping this local variable shouldn't be necessary 
+    // because the MudTable ServerData feature should take care of displaying the loading bar appropriately
+    // However due to https://github.com/MudBlazor/MudBlazor/issues/4662 this doesn't currently work
+    private bool loading = true;
 
     private async Task<TableData<MemberSummary>> ServerReload(TableState state)
     {
-    // Workaround for https://github.com/Garderoben/MudBlazor/issues/2070
-        if (_isBusy)
-            return new TableData<MemberSummary>();
-
-        _isBusy = true;
-
+        loading = true;
         MemberSummaryOrderOption orderBy = state.SortLabel switch
         {
             "name" => MemberSummaryOrderOption.Name,
@@ -127,7 +127,7 @@
         var query = new SearchMembersQuery(searchString, state.Page, state.PageSize, orderBy, sortDirection);
         var data = await _mediator.Send(query);
 
-        _isBusy = false;
+        loading = false;
         return new TableData<MemberSummary>()
         {
             TotalItems = data.Total,

diff --git a/Web/Pages/Transactions/Transactions.razor b/Web/Pages/Transactions/Transactions.razor
@@ -13,7 +13,8 @@
           Dense="true"
           Hover="true"
           @ref="table"
-          ServerData="@(new Func<TableState, Task<TableData<TransactionSummary>>>(ServerReload))">
+          ServerData="@(new Func<TableState, Task<TableData<TransactionSummary>>>(ServerReload))"
+          Loading="@loading">
     <ToolBarContent>
         <MudText Typo="Typo.h6">Transactions</MudText>
         <MudSpacer />
@@ -31,7 +32,8 @@
                    DisableElevation="true"
                    Link="/transactions/new"
                    Size="Size.Small"
-                   Variant="Variant.Filled">
+                   Variant="Variant.Filled"
+                   Disabled="@loading">
             Add transaction
         </MudButton>
     </ToolBarContent>
@@ -105,15 +107,15 @@
 @code {
     private MudTable<TransactionSummary>? table;
     private string searchString = "";
-    private bool _isBusy = false;
+
+    // TODO: Keeping this local variable shouldn't be necessary 
+    // because the MudTable ServerData feature should take care of displaying the loading bar appropriately
+    // However due to https://github.com/MudBlazor/MudBlazor/issues/4662 this doesn't currently work
+    private bool loading = true;
 
     private async Task<TableData<TransactionSummary>> ServerReload(TableState state)
     {
-        // Workaround for https://github.com/Garderoben/MudBlazor/issues/2070
-        if (_isBusy)
-            return new TableData<TransactionSummary>();
-
-        _isBusy = true;
+        loading = true;
 
         TransactionSummaryOrderOption orderBy = state.SortLabel switch
         {
@@ -126,7 +128,7 @@
         var query = new GetTransactionQuery(searchString, state.Page, state.PageSize, orderBy, sortDirection);
         var data = await _mediator.Send(query);
 
-        _isBusy = false;
+        loading = false;
         return new TableData<TransactionSummary>()
         {
             TotalItems = data.Total,

diff --git a/Web/Web.csproj b/Web/Web.csproj
@@ -20,7 +20,7 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>
-    <PackageReference Include="MudBlazor" Version="6.0.9" />
+    <PackageReference Include="MudBlazor" Version="6.0.14" />
   </ItemGroup>
 
   <PropertyGroup>