From fff7bfc3d29f3a6c7ab47b3636cda5a8525603a7 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Sat, 10 May 2025 22:35:52 +0800
Subject: [PATCH] style: Optimization of the loading style of the overview page
 (#8592)

---
 frontend/src/views/home/app/index.vue    |  2 +-
 frontend/src/views/home/index.vue        | 12 ++++++++++--
 frontend/src/views/home/status/index.vue |  6 +++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index 70a33d855..15ca41e09 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <CardWithHeader :header="$t('app.app')" class="card-interval" :loading="loading">
+        <CardWithHeader :header="$t('app.app')" class="card-interval" v-loading="loading">
             <template #header-r>
                 <el-popover placement="left" :width="226" trigger="click">
                     <el-input size="small" v-model="filter" clearable @input="loadOption()" />
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index e2d52b284..ae5093e62 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -87,7 +87,11 @@
                         <Status ref="statusRef" style="margin-bottom: 33px" />
                     </template>
                 </CardWithHeader>
-                <CardWithHeader :header="$t('menu.monitor')" class="card-interval">
+                <CardWithHeader
+                    :header="$t('menu.monitor')"
+                    class="card-interval chart-card"
+                    v-loading="!chartsOption['networkChart']"
+                >
                     <template #header-r>
                         <el-radio-group
                             style="float: right; margin-left: 5px"
@@ -411,7 +415,7 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
     const res = await loadBaseInfo(searchInfo.ioOption, searchInfo.netOption);
     baseInfo.value = res.data;
     currentInfo.value = baseInfo.value.currentInfo;
-    await onLoadCurrentInfo();
+    onLoadCurrentInfo();
     isStatusInit.value = false;
     statusRef.value.acceptParams(currentInfo.value, baseInfo.value);
     appRef.value.acceptParams();
@@ -634,4 +638,8 @@ onBeforeUnmount(() => {
         line-height: 20px;
     }
 }
+
+.chart-card {
+    min-height: 383px;
+}
 </style>
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index 1c58bd769..ada9f2f07 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -331,7 +331,11 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
 
 const cpuShowAll = ref();
 
-const chartsOption = ref({ cpu: null, memory: null, load: null });
+const chartsOption = ref({
+    cpu: { title: 'CPU', data: 0 },
+    memory: { title: i18n.global.t('monitor.memory'), data: 0 },
+    load: { title: i18n.global.t('home.load'), data: 0 },
+});
 
 const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo): void => {
     currentInfo.value = current;