mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-03-27 11:03:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add skeleton loading animation to recent emails (#897)

Browse Source
This commit is contained in:
Leendert de Borst
2025-06-06 16:30:11 +02:00
committed by Leendert de Borst
parent 566d4259bd
commit 4683d6bea6
1 changed files with 46 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor
View File

@@ -2,6 +2,7 @@
@using System.Text.Json
@using AliasVault.Shared.Models.Spamok
@using AliasVault.Shared.Models.WebApi
@using AliasVault.Client.Main.Services
@inherits ComponentBase
@inject IHttpClientFactory HttpClientFactory
@inject HttpClient HttpClient
@@ -11,6 +12,7 @@
@inject EmailService EmailService
@using AliasVault.Shared.Core
@inject ILogger<RecentEmails> Logger
@inject MinDurationLoadingService LoadingService
@implements IAsyncDisposable
@if (EmailModalVisible)
@@ -30,15 +32,53 @@
{
<div class="w-3 h-3 mr-2 rounded-full bg-primary-300 border-2 border-primary-100 animate-pulse" title="Auto-refresh enabled"></div>
}
<button id="recent-email-refresh" @onclick="ManualRefresh" type="button" class="text-blue-700 border border-blue-700 hover:bg-blue-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:focus:ring-blue-800 dark:hover:bg-blue-500">
Refresh
<button id="recent-email-refresh" @onclick="ManualRefresh" type="button" class="text-blue-700 border border-blue-700 hover:bg-blue-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2 text-center inline-flex items-center dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:focus:ring-blue-800 dark:hover:bg-blue-500">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
</div>
</div>
@if (IsLoading)
{
<LoadingIndicator/>
<div class="flex flex-col mt-6">
<div class="overflow-x-auto rounded-lg">
<div class="inline-block min-w-full align-middle">
<div class="overflow-hidden shadow sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">
Subject
</th>
<th scope="col" class="p-4 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-white">
Date
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
@for (int i = 0; i < 2; i++)
{
<tr class="hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4">
<SkeletonBase Height="20" AdditionalClasses="w-48">
<div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
</SkeletonBase>
</td>
<td class="p-4">
<SkeletonBase Height="20" AdditionalClasses="w-24">
<div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
</SkeletonBase>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
}
else if (!string.IsNullOrEmpty(Error))
{
@@ -106,13 +146,9 @@
private EmailApiModel Email { get; set; } = new();
private bool EmailModalVisible { get; set; }
private string Error { get; set; } = string.Empty;
private bool IsLoading { get; set; } = true;
private bool IsLoading => LoadingService.IsLoading("recentemails");
private bool IsSpamOk { get; set; } = false;
private const int ACTIVE_TAB_REFRESH_INTERVAL = 2000; // 2 seconds
private CancellationTokenSource? _pollingCts;
private DotNetObjectReference<RecentEmails>? _dotNetRef;
private bool _isPageVisible = true;
@@ -261,11 +297,11 @@
/// <returns></returns>
private async Task ManualRefresh()
{
IsLoading = true;
LoadingService.StartLoading("recentemails", 500, StateHasChanged);
StateHasChanged();
CloseEmailModal();
await LoadRecentEmailsAsync();
IsLoading = false;
LoadingService.FinishLoading("recentemails", StateHasChanged);
StateHasChanged();
}
@@ -429,7 +465,6 @@
}
MailboxEmails = await EmailService.DecryptEmailList(MailboxEmails);
Error = string.Empty;
}