From 5b3c6f325ab6e2256214f5419fc158c1bd74f425 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Fri, 25 Apr 2025 21:45:47 +0800
Subject: [PATCH] update

---
 packages/frontend/src/components/NotificationSettings.vue | 3 ++-
 packages/frontend/src/components/ProxyList.vue            | 3 ++-
 packages/frontend/src/views/AuditLogView.vue              | 3 ++-
 packages/frontend/src/views/SettingsView.vue              | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/NotificationSettings.vue b/packages/frontend/src/components/NotificationSettings.vue
index b671265..ae85428 100644
--- a/packages/frontend/src/components/NotificationSettings.vue
+++ b/packages/frontend/src/components/NotificationSettings.vue
@@ -4,7 +4,8 @@
       {{ $t('settings.notifications.title') }}
     </h2>
 
-    <div v-if="store.isLoading" class="p-4 text-center text-text-secondary italic"> <!-- Loading state -->
+    <!-- Loading state (Only show if loading AND no settings are displayed yet) -->
+    <div v-if="store.isLoading && settings.length === 0" class="p-4 text-center text-text-secondary italic">
       {{ $t('common.loading') }}
     </div>
     <div v-if="store.error" class="p-4 mb-4 border-l-4 border-error bg-error/10 text-error rounded"> <!-- Error state using error color -->
diff --git a/packages/frontend/src/components/ProxyList.vue b/packages/frontend/src/components/ProxyList.vue
index 2c8f8ed..b063209 100644
--- a/packages/frontend/src/components/ProxyList.vue
+++ b/packages/frontend/src/components/ProxyList.vue
@@ -30,7 +30,8 @@ const formatTimestamp = (timestamp: number | null): string => {
 
 <template>
   <div class="mt-4"> <!-- Container with top margin -->
-    <div v-if="isLoading" class="p-4 border border-border rounded-md mb-4 text-text-secondary bg-header/50 text-center italic"> <!-- Loading state consistent with Notifications -->
+    <!-- Loading state (Only show if loading AND no proxies are displayed yet) -->
+    <div v-if="isLoading && proxies.length === 0" class="p-4 border border-border rounded-md mb-4 text-text-secondary bg-header/50 text-center italic">
       {{ t('proxies.loading') }}
     </div>
     <div v-else-if="error" class="p-4 mb-4 border-l-4 border-error bg-error/10 text-error rounded"> <!-- Error state consistent with Notifications -->
diff --git a/packages/frontend/src/views/AuditLogView.vue b/packages/frontend/src/views/AuditLogView.vue
index c2fa599..a289c91 100644
--- a/packages/frontend/src/views/AuditLogView.vue
+++ b/packages/frontend/src/views/AuditLogView.vue
@@ -29,7 +29,8 @@
       </div>
       <!-- End Filtering Controls -->
 
-      <div v-if="store.isLoading" class="p-4 text-center text-text-secondary italic"> <!-- Loading state -->
+      <!-- Loading state (Only show if loading AND no logs are displayed yet) -->
+      <div v-if="store.isLoading && logs.length === 0" class="p-4 text-center text-text-secondary italic">
         {{ $t('common.loading') }}
       </div>
       <div v-if="store.error" class="p-4 mb-4 border-l-4 border-error bg-error/10 text-error rounded"> <!-- Error state -->
diff --git a/packages/frontend/src/views/SettingsView.vue b/packages/frontend/src/views/SettingsView.vue
index 8e860d0..3794157 100644
--- a/packages/frontend/src/views/SettingsView.vue
+++ b/packages/frontend/src/views/SettingsView.vue
@@ -242,7 +242,8 @@
                 <hr class="border-border/50">
                 <!-- Blacklist table -->
                 <h3 class="text-base font-semibold text-foreground">{{ $t('settings.ipBlacklist.currentBannedTitle') }}</h3>
-                <div v-if="ipBlacklist.loading" class="p-4 text-center text-text-secondary italic">{{ $t('settings.ipBlacklist.loadingList') }}</div>
+                <!-- Loading state (Only show if loading AND no entries are displayed yet) -->
+                <div v-if="ipBlacklist.loading && ipBlacklist.entries.length === 0" class="p-4 text-center text-text-secondary italic">{{ $t('settings.ipBlacklist.loadingList') }}</div>
                 <div v-if="ipBlacklist.error" class="p-3 border-l-4 border-error bg-error/10 text-error text-sm rounded">{{ ipBlacklist.error }}</div>
                 <div v-if="!ipBlacklist.loading && !ipBlacklist.error">
                   <div v-if="ipBlacklist.entries.length > 0" class="overflow-x-auto border border-border rounded-lg shadow-sm bg-background">