diff --git a/nezha-fronted/src/assets/css/components/common/table/settings/cortexDetailTable.scss b/nezha-fronted/src/assets/css/components/common/table/settings/cortexDetailTable.scss
index 8f8169f59..99bd07e35 100644
--- a/nezha-fronted/src/assets/css/components/common/table/settings/cortexDetailTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/settings/cortexDetailTable.scss
@@ -2,7 +2,7 @@
     .sub-container{
         background: $--background-color-empty;
         .nz-table-list{
-            height: auto;
+            height: 100%;
         }
     }
     #cortexDetailTable,#lokiStatusTable {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue b/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue
index 6968894f3..15e2dbd09 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue
@@ -12,19 +12,21 @@
   >
     <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
     <template v-slot>
+      <div v-if="!loading" style="height:auto;">
         <cortexDetailTable
-        v-my-loading="tools.loading"
-        :loading="tools.loading"
         :ringTableData='ringTableData'
         :configTableData='configTableData'
         :servicesTableData='servicesTableData'
         @configval='configval'>
         </cortexDetailTable>
-    </template>
+      </div>
+      <loading v-else ref="loading"></loading>
+  </template>
   </nz-bottom-data-list>
 </template>
 
 <script>
+import loading from '@/components/common/loading'
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
@@ -35,7 +37,8 @@ export default {
   mixins: [dataListMixin, subDataListMixin],
   components: {
     nzBottomDataList,
-    cortexDetailTable
+    cortexDetailTable,
+    loading
   },
   props: {
     obj: Object,
@@ -49,6 +52,7 @@ export default {
       immediate: true,
       deep: true,
       async handler (n) {
+        this.loading = true
         await this.getReadyTableData()
         await this.getIngesterTableData()
         await this.getStoreGatewayTableData()
@@ -65,7 +69,8 @@ export default {
       configTableData: [],
       servicesTableData: [],
       ringTableData: [],
-      readyTableData: ''
+      readyTableData: '',
+      loading: false
     }
   },
   mounted () {
@@ -102,6 +107,7 @@ export default {
     async getReadyTableData () {
       const response = await this.$get('agent/' + this.obj.id + '/cortex/ready')
       if (response.code === 200) {
+        this.$refs.loading.startLoading()
         this.readyTableData = response.data.status
       }
     },
@@ -114,7 +120,8 @@ export default {
         })
         serObj.ready = this.readyTableData
         this.servicesTableData.push(serObj)
-        this.tools.loading = false
+        this.$refs.loading.endLoading()
+        this.loading = false
       }
     }
   }
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue b/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
index 6112fcade..fcfbaf333 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
@@ -12,19 +12,21 @@
     >
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-slot>
+        <div v-if="!loading" style="height:auto;">
           <loki-status-table
-          v-my-loading="tools.loading"
-          :loading="tools.loading"
           :ringTableData='ringTableData'
           :configTableData='configTableData'
           :servicesTableData='servicesTableData'
           @configval='configval'>
           </loki-status-table>
+        </div>
+        <loading v-else ref="loading"></loading>
       </template>
     </nz-bottom-data-list>
   </template>
 
 <script>
+import loading from '@/components/common/loading'
 import dataListMixin from '@/components/common/mixin/dataList'
 import subDataListMixin from '@/components/common/mixin/subDataList'
 import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
@@ -35,7 +37,8 @@ export default {
   mixins: [dataListMixin, subDataListMixin],
   components: {
     nzBottomDataList,
-    lokiStatusTable
+    lokiStatusTable,
+    loading
   },
   props: {
     obj: Object,
@@ -49,6 +52,7 @@ export default {
       immediate: true,
       deep: true,
       async handler (n) {
+        this.loading = true
         await this.getReadyTableData()
         await this.getConfigTableData()
         await this.getCompactorTableData()
@@ -63,7 +67,8 @@ export default {
       configTableData: [],
       servicesTableData: [],
       ringTableData: [],
-      readyTableData: ''
+      readyTableData: '',
+      loading: false
     }
   },
   mounted () {
@@ -88,6 +93,7 @@ export default {
     async getReadyTableData () {
       const response = await this.$get('agent/' + this.obj.id + '/loki/ready')
       if (response.code === 200) {
+        this.$refs.loading.startLoading()
         this.readyTableData = response.data.status
       }
     },
@@ -100,7 +106,8 @@ export default {
         })
         serObj.ready = this.readyTableData
         this.servicesTableData.push(serObj)
-        this.tools.loading = false
+        this.$refs.loading.endLoading()
+        this.loading = false
       }
     }
   }