From c29ce4e187612ef9a32c4ef1aa1125fff80f6602 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 22 Aug 2022 18:21:02 +0800
Subject: [PATCH] add loading

---
 src/store/modules/network-profiling.ts                 |  4 ++++
 .../dashboard/related/network-profiling/Content.vue    | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/store/modules/network-profiling.ts b/src/store/modules/network-profiling.ts
index 9c70a591..99d201ea 100644
--- a/src/store/modules/network-profiling.ts
+++ b/src/store/modules/network-profiling.ts
@@ -35,6 +35,7 @@ interface NetworkProfilingState {
   selectedMetric: Nullable<LayoutConfig>;
   activeMetricIndex: string;
   aliveNetwork: boolean;
+  loadNodes: boolean;
 }
 
 export const networkProfilingStore = defineStore({
@@ -51,6 +52,7 @@ export const networkProfilingStore = defineStore({
     selectedMetric: null,
     activeMetricIndex: "",
     aliveNetwork: false,
+    loadNodes: false,
   }),
   actions: {
     setSelectedNetworkTask(task: EBPFTaskList) {
@@ -160,9 +162,11 @@ export const networkProfilingStore = defineStore({
       duration: any;
       serviceInstanceId: string;
     }) {
+      this.loadNodes = true;
       const res: AxiosResponse = await graphql
         .query("getProcessTopology")
         .params(params);
+      this.loadNodes = false;
       if (res.data.errors) {
         this.nodes = [];
         this.calls = [];
diff --git a/src/views/dashboard/related/network-profiling/Content.vue b/src/views/dashboard/related/network-profiling/Content.vue
index 78ac3612..4f9ca294 100644
--- a/src/views/dashboard/related/network-profiling/Content.vue
+++ b/src/views/dashboard/related/network-profiling/Content.vue
@@ -15,10 +15,16 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <Tasks />
-    <div class="vis-graph ml-5" v-if="networkProfilingStore.nodes.length">
+    <div
+      class="vis-graph ml-5"
+      v-if="networkProfilingStore.nodes.length"
+      v-loading="networkProfilingStore.loadNodes"
+    >
       <process-topology />
     </div>
-    <div class="text" v-else>{{ t("noData") }}</div>
+    <div class="text" v-else v-loading="networkProfilingStore.loadNodes">
+      {{ t("noData") }}
+    </div>
   </div>
 </template>
 <script lang="ts" setup>