From f7a7f970c62e7c40c610be20219e2558a24a48ff Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 22 Aug 2024 16:12:49 +0800
Subject: [PATCH] feat: add loading

---
 src/views/dashboard/panel/Layout.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 20c214f5..a3ae9ce1 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -14,12 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <grid-layout
+    v-if="dashboardStore.layout.length"
     v-model:layout="dashboardStore.layout"
     :col-num="24"
     :row-height="10"
     :is-draggable="dashboardStore.editMode"
     :is-resizable="dashboardStore.editMode"
-    v-if="dashboardStore.layout.length"
+    v-loading.fullscreen.lock="loading"
+    element-loading-text="Loading..."
+    element-loading-background="rgba(122, 122, 122, 0.8)"
   >
     <grid-item
       v-for="item in dashboardStore.layout"
@@ -59,6 +62,7 @@ limitations under the License. -->
       const dashboardStore = useDashboardStore();
       const selectorStore = useSelectorStore();
       const metricsValues = ref();
+      const loading = ref<boolean>(false);
 
       function clickGrid(item: LayoutConfig, event: Event) {
         dashboardStore.activeGridItem(item.i);
@@ -93,7 +97,9 @@ limitations under the License. -->
         if (!widgets.length) {
           return {};
         }
+        loading.value = true;
         metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
+        loading.value = false;
       }
       async function queryTabsMetrics() {
         const configList = dashboardStore.currentTabItems
@@ -106,7 +112,9 @@ limitations under the License. -->
         if (!configList.length) {
           return {};
         }
+        loading.value = true;
         metricsValues.value = (await useDashboardQueryProcessor(configList)) || {};
+        loading.value = false;
       }
 
       onBeforeUnmount(() => {
@@ -162,6 +170,7 @@ limitations under the License. -->
         t,
         dragIgnoreFrom,
         metricsValues,
+        loading,
       };
     },
   });