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 538df3ab2..683bb21c1 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 2d325d0dd..cd3f27bc1 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>
+      </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,12 +52,14 @@ export default {
       immediate: true,
       deep: true,
       async handler (n) {
-        this.tools.loading = true
+        this.loading = true
         this.getReadyTableData().then(res => {
           this.getTableData()
         }).catch(res => {
           this.ringTableData.push([])
-          this.tools.loading = false
+          this.$refs.loading.endLoading()
+          this.loading = false
+          this.$message.error(res.msg)
         })
       }
     }
@@ -66,7 +71,8 @@ export default {
       configTableData: [],
       servicesTableData: [],
       ringTableData: [],
-      readyTableData: ''
+      readyTableData: '',
+      loading: false
     }
   },
   mounted () {
@@ -106,16 +112,18 @@ export default {
       if (response.code === 200) {
         this.configTableData = response.data.content.split(/\n/)
       }
-      this.tools.loading = false
+      this.$refs.loading.endLoading()
+      this.loading = false
     },
     async getReadyTableData () {
       return new Promise((resolve, reject) => {
         this.$get('agent/' + this.obj.id + '/cortex/ready').then(response => {
           if (response.code === 200) {
+            this.$refs.loading.startLoading()
             this.readyTableData = response.data.status
             resolve()
           } else {
-            reject()
+            reject(response)
           }
         })
       })
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue b/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
index f000cd96f..43f9d067f 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,11 +52,13 @@ export default {
       immediate: true,
       deep: true,
       async handler (n) {
-        this.tools.loading = true
+        this.loading = true
         this.getReadyTableData().then(res => {
           this.getTableData()
         }).catch(res => {
-          this.tools.loading = false
+          this.$refs.loading.endLoading()
+          this.loading = false
+          this.$message.error(res.msg)
         })
       }
     }
@@ -65,7 +70,8 @@ export default {
       configTableData: [],
       servicesTableData: [],
       ringTableData: [],
-      readyTableData: ''
+      readyTableData: '',
+      loading: false
     }
   },
   mounted () {
@@ -85,7 +91,8 @@ export default {
       if (response.code === 200) {
         this.configTableData = response.data.content.split(/\n/)
       }
-      this.tools.loading = false
+      this.$refs.loading.endLoading()
+      this.loading = false
     },
     async getCompactorTableData () {
       const response = await this.$get('agent/' + this.obj.id + '/loki/compactor/ring')
@@ -97,10 +104,11 @@ export default {
       return new Promise((resolve, reject) => {
         this.$get('agent/' + this.obj.id + '/loki/ready').then(response => {
           if (response.code === 200) {
+            this.$refs.loading.startLoading()
             this.readyTableData = response.data.status
             resolve()
           } else {
-            reject()
+            reject(response)
           }
         })
       })