diff --git a/apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor b/apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor
index 975bff571..709bc419a 100644
--- a/apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor
+++ b/apps/server/AliasVault.Client/Main/Components/Email/RecentEmails.razor
@@ -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;
     }