perf: add auto refresh server status indicator

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>

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>