perf: add loading indicator to server status page

This commit is contained in:
tiny-craft 2023-07-17 11:03:31 +08:00
parent 5806b19fb1
commit d976cd1731
2 changed files with 66 additions and 46 deletions

View File

@ -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)) {
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">

View File

@ -10,6 +10,7 @@ const props = defineProps({
server: String,
info: Object,
autoRefresh: false,
loading: false,
})
const emit = defineEmits(['update:autoRefresh', 'refresh'])
@ -116,6 +117,7 @@ const infoFilter = ref('')
</n-tooltip>
</n-space>
</template>
<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]">
@ -142,6 +144,7 @@ const infoFilter = ref('')
</n-statistic>
</n-gi>
</n-grid>
</n-spin>
</n-card>
<n-card :title="$t('all_info')">
<template #header-extra>
@ -151,6 +154,7 @@ const infoFilter = ref('')
</template>
</n-input>
</template>
<n-spin :show="props.loading">
<n-data-table
:columns="[
{
@ -168,6 +172,7 @@ const infoFilter = ref('')
]"
:data="infoList"
/>
</n-spin>
</n-card>
</n-space>
</n-scrollbar>