From 7ef5e16e7215479156c08c2a4e8b322597d40c3f Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Sun, 3 Sep 2023 00:20:47 +0800
Subject: [PATCH] perf: add auto refresh server status indicator

---
 frontend/src/components/content/ContentPane.vue     |  5 +++++
 .../content_value/ContentServerStatus.vue           | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 10b79fe..5b59898 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -21,6 +21,7 @@ const serverName = computed(() => {
     return ''
 })
 const loadingServerInfo = ref(false)
+const autoLoadingServerInfo = ref(false)
 
 /**
  * refresh server status info
@@ -30,12 +31,15 @@ const loadingServerInfo = ref(false)
 const refreshInfo = async (force) => {
     if (force) {
         loadingServerInfo.value = true
+    } else {
+        autoLoadingServerInfo.value = true
     }
     if (!isEmpty(serverName.value) && connectionStore.isConnected(serverName.value)) {
         try {
             serverInfo.value = await connectionStore.getServerInfo(serverName.value)
         } finally {
             loadingServerInfo.value = false
+            autoLoadingServerInfo.value = false
         }
     }
 }
@@ -129,6 +133,7 @@ const onReloadKey = async () => {
                 v-model:auto-refresh="autoRefresh"
                 :info="serverInfo"
                 :loading="loadingServerInfo"
+                :auto-loading="autoLoadingServerInfo"
                 :server="serverName"
                 @refresh="refreshInfo(true)" />
         </div>
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index 7bd9115..bc83cc4 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -10,6 +10,7 @@ const props = defineProps({
     info: Object,
     autoRefresh: false,
     loading: false,
+    autoLoading: false,
 })
 
 const emit = defineEmits(['update:autoRefresh', 'refresh'])
@@ -102,11 +103,19 @@ const infoFilter = ref('')
                 <template #header-extra>
                     <n-space align="center" inline>
                         {{ $t('auto_refresh') }}
-                        <n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
+                        <n-switch
+                            :value="props.autoRefresh"
+                            :loading="props.autoLoading"
+                            @update:value="(v) => emit('update:autoRefresh', v)" />
                         <n-tooltip>
                             {{ $t('refresh') }}
                             <template #trigger>
-                                <n-button circle size="small" tertiary @click="emit('refresh')">
+                                <n-button
+                                    circle
+                                    size="small"
+                                    tertiary
+                                    @click="emit('refresh')"
+                                    :loading="props.autoLoading">
                                     <template #icon>
                                         <n-icon :component="Refresh" />
                                     </template>