From d976cd173119d4fd39ebf657f390c38d57d79934 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Mon, 17 Jul 2023 11:03:31 +0800
Subject: [PATCH] perf: add loading indicator to server status page

---
 .../src/components/content/ContentPane.vue    | 23 ++++-
 .../content_value/ContentServerStatus.vue     | 89 ++++++++++---------
 2 files changed, 66 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 4ab25d0..1b03fca 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -22,15 +22,29 @@ const serverName = computed(() => {
     }
     return ''
 })
-const refreshInfo = async () => {
+const loadingServerInfo = ref(false)
+
+/**
+ * refresh server status info
+ * @param {boolean} [force] force refresh will show loading indicator
+ * @returns {Promise<void>}
+ */
+const refreshInfo = async (force) => {
+    if (force) {
+        loadingServerInfo.value = true
+    }
     if (!isEmpty(serverName.value) && connectionStore.isConnected(serverName.value)) {
-        serverInfo.value = await connectionStore.getServerInfo(serverName.value)
+        try {
+            serverInfo.value = await connectionStore.getServerInfo(serverName.value)
+        } finally {
+            loadingServerInfo.value = false
+        }
     }
 }
 
 let intervalId
 onMounted(() => {
-    refreshInfo()
+    refreshInfo(true)
     intervalId = setInterval(() => {
         if (autoRefresh.value) {
             refreshInfo()
@@ -143,7 +157,8 @@ const onCloseTab = (tabIndex) => {
                 v-model:auto-refresh="autoRefresh"
                 :server="serverName"
                 :info="serverInfo"
-                @refresh="refreshInfo"
+                :loading="loadingServerInfo"
+                @refresh="refreshInfo(true)"
             />
         </div>
         <div v-else-if="showNonexists" class="content-container flex-item-expand flex-box-v">
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index e4723c0..352488b 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -10,6 +10,7 @@ const props = defineProps({
     server: String,
     info: Object,
     autoRefresh: false,
+    loading: false,
 })
 
 const emit = defineEmits(['update:autoRefresh', 'refresh'])
@@ -116,32 +117,34 @@ const infoFilter = ref('')
                         </n-tooltip>
                     </n-space>
                 </template>
-                <n-grid x-gap="5" style="min-width: 500px">
-                    <n-gi :span="6">
-                        <n-statistic :label="$t('uptime')" :value="uptime[0]">
-                            <template #suffix> {{ $t(uptime[1]) }}</template>
-                        </n-statistic>
-                    </n-gi>
-                    <n-gi :span="6">
-                        <n-statistic
-                            :label="$t('connected_clients')"
-                            :value="get(props.info, 'connected_clients', 0)"
-                        />
-                    </n-gi>
-                    <n-gi :span="6">
-                        <n-statistic :value="totalKeys">
-                            <template #label>
-                                {{ $t('total_keys') }}
-                                <n-icon :component="Help" />
-                            </template>
-                        </n-statistic>
-                    </n-gi>
-                    <n-gi :span="6">
-                        <n-statistic :label="$t('memory_used')" :value="usedMemory[0]">
-                            <template #suffix> {{ usedMemory[1] }}</template>
-                        </n-statistic>
-                    </n-gi>
-                </n-grid>
+                <n-spin :show="props.loading">
+                    <n-grid x-gap="5" style="min-width: 500px">
+                        <n-gi :span="6">
+                            <n-statistic :label="$t('uptime')" :value="uptime[0]">
+                                <template #suffix> {{ $t(uptime[1]) }}</template>
+                            </n-statistic>
+                        </n-gi>
+                        <n-gi :span="6">
+                            <n-statistic
+                                :label="$t('connected_clients')"
+                                :value="get(props.info, 'connected_clients', 0)"
+                            />
+                        </n-gi>
+                        <n-gi :span="6">
+                            <n-statistic :value="totalKeys">
+                                <template #label>
+                                    {{ $t('total_keys') }}
+                                    <n-icon :component="Help" />
+                                </template>
+                            </n-statistic>
+                        </n-gi>
+                        <n-gi :span="6">
+                            <n-statistic :label="$t('memory_used')" :value="usedMemory[0]">
+                                <template #suffix> {{ usedMemory[1] }}</template>
+                            </n-statistic>
+                        </n-gi>
+                    </n-grid>
+                </n-spin>
             </n-card>
             <n-card :title="$t('all_info')">
                 <template #header-extra>
@@ -151,23 +154,25 @@ const infoFilter = ref('')
                         </template>
                     </n-input>
                 </template>
-                <n-data-table
-                    :columns="[
-                        {
-                            title: $t('key'),
-                            key: 'key',
-                            defaultSortOrder: 'ascend',
-                            sorter: 'default',
-                            minWidth: 100,
-                            filterOptionValue: infoFilter,
-                            filter(value, row) {
-                                return !!~row.key.indexOf(value.toString())
+                <n-spin :show="props.loading">
+                    <n-data-table
+                        :columns="[
+                            {
+                                title: $t('key'),
+                                key: 'key',
+                                defaultSortOrder: 'ascend',
+                                sorter: 'default',
+                                minWidth: 100,
+                                filterOptionValue: infoFilter,
+                                filter(value, row) {
+                                    return !!~row.key.indexOf(value.toString())
+                                },
                             },
-                        },
-                        { title: $t('value'), key: 'value' },
-                    ]"
-                    :data="infoList"
-                />
+                            { title: $t('value'), key: 'value' },
+                        ]"
+                        :data="infoList"
+                    />
+                </n-spin>
             </n-card>
         </n-space>
     </n-scrollbar>