diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 47f03e92b..bcc7ac615 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -471,3 +471,12 @@
   overflow: hidden;
   white-space: nowrap;
 }
+
+.fade-enter,
+.fade-leave-active {
+  opacity: .7;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s;
+}
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 01ee2b8fc..c9d54f0a6 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="panel list-page">
     <div class="main-list">
+      <div>
+        <transition name="el-zoom-in-center">
+          <div class="loading" v-if="isLoading"></div>
+        </transition>
+      </div>
       <div class="main-container" style="padding-right: 0">
         <div class="top-tools">
           <div v-if="panelData.length == 0" class="top-tool-left" style="margin-left: 10px;">
@@ -108,12 +113,14 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import Template from '@/components/page/config/template'
 import { fromRoute } from '@/components/common/js/constants'
+
 export default {
   name: 'panel',
   data () {
     return {
       fromRoute,
       overScroll10: false,
+      isLoading: true,
       panelLock: true,
       showTopBtn: false, // top按钮
       visible: false,
@@ -546,9 +553,11 @@ export default {
                 this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
               } catch (e) {}
             })
+            this.isLoading = false
           } else {
             this.showPanel.id = ''
             this.filter.panelId = ''
+            this.isLoading = true
           }
           this.pageObj.total = response.data.total
           if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
@@ -923,3 +932,14 @@ export default {
 <style lang="scss">
   @import '@/assets/css/common/tableCommon.scss';
 </style>
+<style scoped>
+  .loading {
+    position: fixed;
+    left: 250px;
+    top: 59px;
+    height: 100%;
+    width: 100%;
+    background: center center no-repeat #fff;
+    z-index: 10;
+  }
+</style>