diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
index 9aabcd47..23a9998f 100644
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -79,15 +79,22 @@
         align-items: center;
         padding: 0 30px;
 
-        span:first-of-type {
-          font-size: 30px;
-          color: #333333;
-          font-weight: bold;
-        }
-        span:last-of-type {
+        .overview-left-span {
           font-size: 16px;
           color: #666666;
         }
+        .overview-left-loading {
+          display: inline-block;
+          position: relative;
+          .overview-left-loading-span {
+            font-size: 30px;
+            color: #333333;
+            font-weight: bold;
+          }
+          .chart__loading i.el-icon-loading {
+            top: calc(50% - 12px);
+          }
+        }
       }
       .overview-right {
         display: flex;
diff --git a/src/assets/css/components/views/entityExplorer/entity-filter.scss b/src/assets/css/components/views/entityExplorer/entity-filter.scss
index 1068e38f..13a8264e 100644
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss
@@ -55,6 +55,13 @@
         }
         .row__value {
           color: #666;
+          position: relative;
+          display: inline-block;
+          .chart__loading i.el-icon-loading {
+            font-size: 18px;
+            top: calc(50% - 10px);
+            left: calc(50% - 8px);
+          }
         }
       }
     }
diff --git a/src/assets/css/components/views/entityExplorer/entityList/card.scss b/src/assets/css/components/views/entityExplorer/entityList/card.scss
index 76cc46ad..edfdddb1 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/card.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/card.scss
@@ -92,8 +92,9 @@
       justify-content: left;
     }
     .body__drawing-box {
+      height: 40px;
       position: relative;
-      height: 60px;
+      margin-top: 10px;
       .chart__loading {
         top: 0;
         height: 100%;
@@ -101,8 +102,8 @@
     }
     .body__drawing {
       position: absolute;
-      padding: 10px 30px;
-      height: 60px;
+      padding: 0 30px;
+      height: 100%;
       width: 100%;
     }
 
diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
index 15207099..9d7b0d52 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -99,6 +99,14 @@
           &.row__content--width200 {
             width: 200px;
           }
+          .row__content-loading {
+            position: relative;
+            .chart__loading i.el-icon-loading {
+              font-size: 14px;
+              top: calc(50% - 5px);
+              left: calc(50% - 4px);
+            }
+          }
         }
         .row__contents {
           display: flex;
diff --git a/src/assets/css/components/views/entityExplorer/entityList/row.scss b/src/assets/css/components/views/entityExplorer/entityList/row.scss
index 42d9b8b6..bfeac711 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -93,6 +93,16 @@
                 display: flex;
                 align-items: center;
                 flex-direction: row;
+                .item-box-loading {
+                  position: relative;
+                  display: flex;
+                  .chart__loading i.el-icon-loading {
+                    font-size: 14px;
+                    padding: 0;
+                    top: calc(50% - 5px);
+                    left: calc(50% - 4px);
+                  }
+                }
 
                 i {
                   padding-right: 6px;
@@ -166,4 +176,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index e39e7df4..ad7e546e 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -23,6 +23,7 @@
       <div style="display: flex; height: 100%;">
         <entity-filter
             :filter-data="filterData"
+            :loading-left="loadingLeft"
             :q="q"
             :time-filter="timeFilter"
             @filter="filter"
@@ -55,8 +56,11 @@
         <el-divider direction="vertical"></el-divider>
         <div class="entity-overview">
           <div class="overview-left">
-            <span>{{entityAppTotal}}</span>
-            <span>APP</span>
+            <span class="overview-left-loading">
+              <loading :loading="loading"></loading>
+              <span class="overview-left-loading-span">{{entityAppTotal}}</span>
+            </span>
+            <span class="overview-left-span">APP</span>
           </div>
           <div class="overview-right">
             <div class="right-row">
@@ -74,8 +78,11 @@
         <el-divider direction="vertical"></el-divider>
         <div class="entity-overview">
           <div class="overview-left">
-            <span>{{entityDomainTotal}}</span>
-            <span>DOMAIN</span>
+            <span class="overview-left-loading">
+              <loading :loading="loading"></loading>
+              <span class="overview-left-loading-span">{{entityDomainTotal}}</span>
+            </span>
+            <span class="overview-left-span">DOMAIN</span>
           </div>
           <div class="overview-right">
             <div class="right-row">
@@ -93,8 +100,11 @@
         <el-divider direction="vertical"></el-divider>
         <div class="entity-overview">
           <div class="overview-left">
-            <span>{{entityIpTotal}}</span>
-            <span>IP</span>
+            <span class="overview-left-loading">
+              <loading :loading="loading"></loading>
+              <span class="overview-left-loading-span">{{entityIpTotal}}</span>
+            </span>
+            <span class="overview-left-span">IP</span>
           </div>
           <div class="overview-right">
             <div class="right-row">
@@ -127,10 +137,12 @@ import { api } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { ref } from 'vue'
 import Pagination from '@/components/common/Pagination'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'entity-explorer',
   components: {
+    Loading,
     ExplorerSearch,
     DateTimeRange,
     TimeRefresh,
@@ -259,7 +271,9 @@ export default {
       q: '',
       metaList: [],
       limitFilterType: true, // 是否限定了filter的类型
-      listLoading: false
+      listLoading: false,
+      loading: false,
+      loadingLeft: false
     }
   },
   methods: {
@@ -415,6 +429,7 @@ export default {
         startTime: getSecond(params.startTime),
         endTime: getSecond(params.endTime)
       }
+      this.loadingLeft = true
       get(api.entityFilter, queryParams).then(response => {
         if (response.data && response.data.result) {
           switch (params.entityType) {
@@ -452,6 +467,7 @@ export default {
               break
             }
           }
+          this.loadingLeft = false
         }
       })
     },
@@ -500,18 +516,24 @@ export default {
       }
       // Total
       get(api.entityTotal, { entityType: 'app' }).then(response => {
+        this.loading = true
         if (response.code === 200) {
           this.entityAppTotal = response.data.result
+          this.loading = false
         }
       })
       get(api.entityTotal, { entityType: 'domain' }).then(response => {
+        this.loading = true
         if (response.code === 200) {
           this.entityDomainTotal = response.data.result
+          this.loading = false
         }
       })
       get(api.entityTotal, { entityType: 'ip' }).then(response => {
+        this.loading = true
         if (response.code === 200) {
           this.entityIpTotal = response.data.result
+          this.loading = false
         }
       })
       // New
diff --git a/src/views/entityExplorer/EntityFilter.vue b/src/views/entityExplorer/EntityFilter.vue
index 8b07f0f5..d449a332 100644
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -11,9 +11,12 @@
         <div class="filter__row" v-for="(item, i) in filter.data" :key="i"  @click="showTopDialog(i, item, filter)"  :ref="`entityTopTen`+i">
           <div class="row__label">
             <i :class="item.icon"></i>
-            <span>{{item.label}}</span>
+              <span>{{item.label}}</span>
+          </div>
+          <div class="row__value">
+            <loading :loading="loadingLeft"></loading>
+            <span>{{item.value}}</span>
           </div>
-          <div class="row__value">{{item.value}}</div>
         </div>
       </div>
     </div>
@@ -36,15 +39,18 @@
 import EntityTop from '@/components/entities/EntityTop'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'EntityFilter',
   components: {
+    Loading,
     EntityTop
   },
   props: {
     filterData: Array,
     q: String,
-    timeFilter: Object
+    timeFilter: Object,
+    loadingLeft: Boolean
   },
   data () {
     return {
diff --git a/src/views/entityExplorer/entityList/Card.vue b/src/views/entityExplorer/entityList/Card.vue
index 1bc5b57d..380537bc 100644
--- a/src/views/entityExplorer/entityList/Card.vue
+++ b/src/views/entityExplorer/entityList/Card.vue
@@ -53,6 +53,7 @@
         </div>
         <!-- 曲线-->
         <div class="body__drawing-box">
+          <loading :loading="loading"></loading>
           <div class="body__drawing" :id="`entityListChart${entityData.ipAddr}${listMode}`"></div>
         </div>
         <div class="body__statics">
@@ -90,6 +91,7 @@
         </div>
         <!-- 曲线-->
         <div class="body__drawing-box">
+          <loading :loading="loading"></loading>
           <div class="body__drawing" :id="`entityListChart${entityData.domainName}${listMode}`"></div>
         </div>
         <div class="body__statics">
@@ -126,6 +128,7 @@
         </div>
         <!-- 曲线-->
         <div class="body__drawing-box">
+          <loading :loading="loading"></loading>
           <div class="body__drawing" :id="`entityListChart${entityData.appName}${listMode}`"></div>
         </div>
         <div class="body__statics">
@@ -140,8 +143,15 @@
 
 <script>
 import entityListMixin from './entityListMixin'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'Card',
-  mixins: [entityListMixin]
+  components: { Loading },
+  mixins: [entityListMixin],
+  data () {
+    return {
+      loading: false
+    }
+  }
 }
 </script>
diff --git a/src/views/entityExplorer/entityList/Row.vue b/src/views/entityExplorer/entityList/Row.vue
index 8aea66df..c0dc0bb3 100644
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -99,21 +99,24 @@
                       : '-'
                   }}</span>
                   <!-- 曲线-->
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailSend${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'domain'"
-                  ></div>
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailSend${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'app'"
-                  ></div>
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailSend${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'ip'"
-                  ></div>
+                  <div class="item-box-loading">
+                    <loading :loading="loading"></loading>
+                    <div
+                        class="row__charts"
+                        :id="`entityDetailSend${entityType}${listMode}`"
+                        v-if="entityData.entityType === 'domain'"
+                    ></div>
+                    <div
+                        class="row__charts"
+                        :id="`entityDetailSend${entityType}${listMode}`"
+                        v-if="entityData.entityType === 'app'"
+                    ></div>
+                    <div
+                        class="row__charts"
+                        :id="`entityDetailSend${entityType}${listMode}`"
+                        v-if="entityData.entityType === 'ip'"
+                    ></div>
+                  </div>
                 </div>
               </div>
 
@@ -134,21 +137,24 @@
                       : '-'
                   }}</span>
 
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailReceived${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'domain'"
-                  ></div>
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailReceived${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'app'"
-                  ></div>
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailReceived${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'ip'"
-                  ></div>
+                  <div class="item-box-loading">
+                    <loading :loading="loading"></loading>
+                    <div
+                      class="row__charts"
+                      :id="`entityDetailReceived${entityType}${listMode}`"
+                      v-if="entityData.entityType === 'domain'"
+                    ></div>
+                    <div
+                      class="row__charts"
+                      :id="`entityDetailReceived${entityType}${listMode}`"
+                      v-if="entityData.entityType === 'app'"
+                    ></div>
+                    <div
+                      class="row__charts"
+                      :id="`entityDetailReceived${entityType}${listMode}`"
+                      v-if="entityData.entityType === 'ip'"
+                    ></div>
+                  </div>
                 </div>
               </div>
               <div class="basic-info__item">
@@ -190,6 +196,7 @@
 import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/DetailOverview'
 import entityListMixin from './entityListMixin'
 import relatedServer from '@/mixins/relatedServer'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'Row',
@@ -199,11 +206,13 @@ export default {
     listMode: String
   },
   components: {
+    Loading,
     DetailOverview
   },
   mixins: [entityListMixin, relatedServer],
   data () {
     return {
+      loading: false,
       isCollapse: true // 是否是折叠状态
     }
   },
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
index 561d81e5..06a86219 100644
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -41,12 +41,18 @@
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
+            <div class="row__content-loading">
+              <loading :loading-app="loadingApp"></loading>
+               <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
+            </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
+            <div class="row__content-loading">
+              <loading :loading-app="loadingApp"></loading>
+               <div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
+            </div>
           </div>
         </div>
       </div>
@@ -193,12 +199,14 @@ import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
 import { get } from '@/utils/http'
 import relatedServer from '@/mixins/relatedServer'
 import { getSecond, getMillisecond } from '@/utils/date-util'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'App',
   mixins: [entityDetailMixin, relatedServer],
   components: {
     Chart,
+    Loading,
     ChartSingleValue
   },
   data () {
@@ -270,7 +278,8 @@ export default {
             i18n: 'entities.pktRetransPercent'
           }
         ],
-        chartDatas: [null, null, null, null, null]
+        chartDatas: [null, null, null, null, null],
+        loadingApp: false
       }
     }
   },
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
index 22cd5234..e0c5aea8 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -45,12 +45,18 @@
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
+            <div class="row__content-loading">
+              <loading :loading-domian="loadingDomain"></loading>
+              <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
+            </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
+            <div class="row__content-loading">
+              <loading :loading-domain="loadingDomian"></loading>
+              <div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
+            </div>
           </div>
         </div>
       </div>
@@ -197,11 +203,13 @@ import _ from 'lodash'
 import { get } from '@/utils/http'
 import relatedServer from '@/mixins/relatedServer'
 import { getSecond, getMillisecond } from '@/utils/date-util'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'Domain',
   components: {
     ChartSingleValue,
+    Loading,
     Chart
   },
   mixins: [entityDetailMixin, relatedServer],
@@ -275,7 +283,8 @@ export default {
             i18n: 'entities.pktRetransPercent'
           }
         ],
-        chartDatas: [null, null, null, null, null]
+        chartDatas: [null, null, null, null, null],
+        loadingDomain: false
       }
     }
   },
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index 3deaf187..0bb75669 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -41,7 +41,10 @@
           <div class="row__content">
             <div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
+            <div class="row__content-loading">
+              <loading :loading="loading"></loading>
+              <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -64,12 +67,18 @@
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
+            <div class="row__content-loading">
+              <loading :loading-ip="loadingIp"></loading>
+              <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
+            </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`"></div>
+            <div class="row__content-loading">
+              <loading :loading-ip="loadingIp"></loading>
+              <div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -216,11 +225,13 @@ import _ from 'lodash'
 import { get } from '@/utils/http'
 import relatedServer from '@/mixins/relatedServer'
 import { getSecond, getMillisecond } from '@/utils/date-util'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'Ip',
   mixins: [entityDetailMixin, relatedServer],
   components: {
+    Loading,
     Chart,
     ChartSingleValue
   },
@@ -296,7 +307,8 @@ export default {
         ],
         chartDatas: [null, null, null, null, null]
       },
-      timer: null
+      timer: null,
+      loadingIp: false
     }
   },
   computed: {
diff --git a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
index a804914d..7581ef0b 100644
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
@@ -9,7 +9,10 @@ import { shallowRef } from 'vue'
 export default {
   props: {
     entity: Object,
-    timeFilter: Object
+    timeFilter: Object,
+    loadingIp: Boolean,
+    loadingApp: Boolean,
+    loadingDomain: Boolean
   },
   data () {
     return {
@@ -69,6 +72,13 @@ export default {
     queryEntityDetailTraffic () {
       this.sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}`))
       this.receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}`))
+      if (this.entityName === 'app') {
+        this.loadingApp = true
+      } else if (this.entityName === 'ip') {
+        this.loadingIp = true
+      } else if (this.entityName === 'domain') {
+        this.loadingDomain = true
+      }
       get(this.trafficUrl, this.getQueryParams()).then(response => {
         if (response.code === 200 && response.data.result && response.data.result.length > 0) {
           response.data.result.forEach(t => {
@@ -126,6 +136,13 @@ export default {
           this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
           this.sentChart.setOption(this.chartOptionSent)
           this.receivedChart.setOption(this.chartOptionReceived)
+          if (this.entityName === 'app') {
+            this.loadingApp = false
+          } else if (this.entityName === 'ip') {
+            this.loadingIp = false
+          } else if (this.entityName === 'domain') {
+            this.loadingDomain = false
+          }
         }
       }).finally(() => {
         setTimeout(() => {
diff --git a/src/views/entityExplorer/entityList/entityListMixin.js b/src/views/entityExplorer/entityList/entityListMixin.js
index d0baa85b..06f578c5 100644
--- a/src/views/entityExplorer/entityList/entityListMixin.js
+++ b/src/views/entityExplorer/entityList/entityListMixin.js
@@ -12,7 +12,8 @@ export default {
   props: {
     entity: Object,
     timeFilter: {},
-    listMode: String
+    listMode: String,
+    loading: Boolean
   },
   data () {
     return {
@@ -205,6 +206,7 @@ export default {
       }
     },
     queryEntityDetailTraffic () {
+      this.loading = true
       get(this.trafficUrl, this.getQueryParams()).then(response => {
         if (response.code === 200 && response.data.result && response.data.result.length > 0) {
           let sentSeries
@@ -271,6 +273,7 @@ export default {
               series: [receivedSeries]
             })
           }
+          this.loading = false
         }
       }).finally(() => {
         setTimeout(() => {