From ed6fb0448bc780d8b8a9af2b249b9a529de0782b Mon Sep 17 00:00:00 2001
From: WD <itechbirds@gmail.com>
Date: Thu, 17 Nov 2022 16:07:18 +0800
Subject: [PATCH] feat: solve the problem of floating loading (#183)

---
 .../related/topology/components/Graph.vue     | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 29e7ce9a..911d074d 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -90,6 +90,7 @@ import {
   reactive,
   watch,
   computed,
+  nextTick,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
@@ -149,6 +150,14 @@ const graphConfig = computed(() => props.config.graph || {});
 const depth = ref<number>(graphConfig.value.depth || 2);
 
 onMounted(async () => {
+  await nextTick();
+  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
+    height: 40,
+    width: 0,
+  };
+  height.value = dom.height - 40;
+  width.value = dom.width;
+
   loading.value = true;
   const json = await selectorStore.fetchServices(dashboardStore.layerId);
   if (json.errors) {
@@ -157,18 +166,13 @@ onMounted(async () => {
   }
   const resp = await getTopology();
   loading.value = false;
+
   if (resp && resp.errors) {
     ElMessage.error(resp.errors);
   }
   topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
   topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
   topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
-  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
-    height: 40,
-    width: 0,
-  };
-  height.value = dom.height - 40;
-  width.value = dom.width;
   window.addEventListener("resize", resize);
   svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
   await initLegendMetrics();
@@ -733,4 +737,8 @@ watch(
     stroke-dashoffset: 0;
   }
 }
+
+.el-loading-spinner {
+  top: 30%;
+}
 </style>