diff --git a/ui/src/views/group/Group.vue b/ui/src/views/group/Group.vue
index b24b080..4444996 100644
--- a/ui/src/views/group/Group.vue
+++ b/ui/src/views/group/Group.vue
@@ -1,93 +1,98 @@
 <template>
   <div class="content">
-    <div class="topic">
-      <div id="form-consumer-group-advanced-search">
-        <a-form
-          class="ant-advanced-search-form"
-          :form="form"
-          @submit="handleSearch"
-        >
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item :label="`消费组`">
-                <a-input
-                  placeholder="groupId"
-                  class="input-w"
-                  v-decorator="['groupId']"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item :label="`状态`">
-                <a-checkbox-group v-decorator="['states']" style="width: 100%">
-                  <a-row>
-                    <a-col :span="8">
-                      <a-checkbox value="Empty"> Empty</a-checkbox>
-                    </a-col>
-                    <a-col :span="8">
-                      <a-checkbox value="PreparingRebalance">
-                        PreparingRebalance
-                      </a-checkbox>
-                    </a-col>
-                    <a-col :span="8">
-                      <a-checkbox value="CompletingRebalance">
-                        CompletingRebalance
-                      </a-checkbox>
-                    </a-col>
-                    <a-col :span="8">
-                      <a-checkbox value="Stable"> Stable</a-checkbox>
-                    </a-col>
-                    <a-col :span="8">
-                      <a-checkbox value="Dead"> Dead</a-checkbox>
-                    </a-col>
-                  </a-row>
-                </a-checkbox-group>
-              </a-form-item>
-            </a-col>
-
-            <a-col :span="4" :style="{ textAlign: 'right' }">
-              <a-form-item>
-                <a-button type="primary" html-type="submit"> 搜索</a-button>
-                <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
-                  重置
-                </a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-      <div class="operation-row-button">
-        <a-button type="primary" @click="handleReset">新增/更新</a-button>
-      </div>
-      <a-table
-        :columns="columns"
-        :data-source="data"
-        bordered
-        row-key="groupId"
-      >
-        <div slot="members" slot-scope="text">
-          <a href="#">{{ text }} </a>
-        </div>
-
-        <div slot="state" slot-scope="text">
-          {{ text }}
-          <!--          <span v-if="text" style="color: red">是</span><span v-else>否</span>-->
-        </div>
-
-        <div slot="operation" slot-scope="record" v-show="!record.internal">
-          <a-popconfirm
-            :title="'删除消费组: ' + record.groupId + '？'"
-            ok-text="确认"
-            cancel-text="取消"
-            @confirm="deleteGroup(record.groupId)"
+    <a-spin :spinning="loading">
+      <div class="topic">
+        <div id="form-consumer-group-advanced-search">
+          <a-form
+            class="ant-advanced-search-form"
+            :form="form"
+            @submit="handleSearch"
           >
-            <a-button size="small" href="javascript:;" class="operation-btn"
-              >删除
-            </a-button>
-          </a-popconfirm>
+            <a-row :gutter="24">
+              <a-col :span="8">
+                <a-form-item :label="`消费组`">
+                  <a-input
+                    placeholder="groupId"
+                    class="input-w"
+                    v-decorator="['groupId']"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item :label="`状态`">
+                  <a-checkbox-group
+                    v-decorator="['states']"
+                    style="width: 100%"
+                  >
+                    <a-row>
+                      <a-col :span="8">
+                        <a-checkbox value="Empty"> Empty</a-checkbox>
+                      </a-col>
+                      <a-col :span="8">
+                        <a-checkbox value="PreparingRebalance">
+                          PreparingRebalance
+                        </a-checkbox>
+                      </a-col>
+                      <a-col :span="8">
+                        <a-checkbox value="CompletingRebalance">
+                          CompletingRebalance
+                        </a-checkbox>
+                      </a-col>
+                      <a-col :span="8">
+                        <a-checkbox value="Stable"> Stable</a-checkbox>
+                      </a-col>
+                      <a-col :span="8">
+                        <a-checkbox value="Dead"> Dead</a-checkbox>
+                      </a-col>
+                    </a-row>
+                  </a-checkbox-group>
+                </a-form-item>
+              </a-col>
+
+              <a-col :span="4" :style="{ textAlign: 'right' }">
+                <a-form-item>
+                  <a-button type="primary" html-type="submit"> 搜索</a-button>
+                  <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
+                    重置
+                  </a-button>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
         </div>
-      </a-table>
-    </div>
+        <div class="operation-row-button">
+          <a-button type="primary" @click="handleReset">新增/更新</a-button>
+        </div>
+        <a-table
+          :columns="columns"
+          :data-source="data"
+          bordered
+          row-key="groupId"
+        >
+          <div slot="members" slot-scope="text">
+            <a href="#">{{ text }} </a>
+          </div>
+
+          <div slot="state" slot-scope="text">
+            {{ text }}
+            <!--          <span v-if="text" style="color: red">是</span><span v-else>否</span>-->
+          </div>
+
+          <div slot="operation" slot-scope="record" v-show="!record.internal">
+            <a-popconfirm
+              :title="'删除消费组: ' + record.groupId + '？'"
+              ok-text="确认"
+              cancel-text="取消"
+              @confirm="deleteGroup(record.groupId)"
+            >
+              <a-button size="small" href="javascript:;" class="operation-btn"
+                >删除
+              </a-button>
+            </a-popconfirm>
+          </div>
+        </a-table>
+      </div>
+    </a-spin>
   </div>
 </template>
 
@@ -115,6 +120,7 @@ export default {
         resourceType: "",
         username: "",
       },
+      loading: false,
     };
   },
   methods: {
@@ -129,19 +135,23 @@ export default {
 
     getConsumerGroupList() {
       Object.assign(this.queryParam, this.form.getFieldsValue());
+      this.loading = true;
       request({
         url: KafkaConsumerApi.getConsumerGroupList.url,
         method: KafkaConsumerApi.getConsumerGroupList.method,
         data: this.queryParam,
       }).then((res) => {
+        this.loading = false;
         this.data = res.data.list;
       });
     },
     deleteGroup(group) {
+      this.loading = true;
       request({
         url: KafkaConsumerApi.deleteConsumerGroup.url + "?groupId=" + group,
         method: KafkaConsumerApi.deleteConsumerGroup.method,
       }).then((res) => {
+        this.loading = false;
         if (res.code == 0) {
           this.$message.success(res.msg);
           this.getConsumerGroupList();
diff --git a/ui/src/views/topic/PartitionInfo.vue b/ui/src/views/topic/PartitionInfo.vue
index 7c3c0fa..22bbcb1 100644
--- a/ui/src/views/topic/PartitionInfo.vue
+++ b/ui/src/views/topic/PartitionInfo.vue
@@ -10,30 +10,32 @@
     @cancel="handleCancel"
   >
     <div>
-      <a-table
-        :columns="columns"
-        :data-source="data"
-        :rowKey="
-          (record, index) => {
-            return index;
-          }
-        "
-      >
-        <ul slot="replicas" slot-scope="text">
-          <ol v-for="i in text" :key="i">
-            {{
-              i
-            }}
-          </ol>
-        </ul>
-        <ul slot="isr" slot-scope="text">
-          <ol v-for="i in text" :key="i">
-            {{
-              i
-            }}
-          </ol>
-        </ul>
-      </a-table>
+      <a-spin :spinning="loading">
+        <a-table
+          :columns="columns"
+          :data-source="data"
+          :rowKey="
+            (record, index) => {
+              return index;
+            }
+          "
+        >
+          <ul slot="replicas" slot-scope="text">
+            <ol v-for="i in text" :key="i">
+              {{
+                i
+              }}
+            </ol>
+          </ul>
+          <ul slot="isr" slot-scope="text">
+            <ol v-for="i in text" :key="i">
+              {{
+                i
+              }}
+            </ol>
+          </ul>
+        </a-table>
+      </a-spin>
     </div>
   </a-modal>
 </template>
@@ -59,6 +61,7 @@ export default {
       columns: columns,
       show: this.visible,
       data: [],
+      loading: false,
     };
   },
   watch: {
@@ -71,10 +74,12 @@ export default {
   },
   methods: {
     getPartitionInfo() {
+      this.loading = true;
       request({
         url: KafkaTopicApi.getPartitionInfo.url + "?topic=" + this.topic,
         method: KafkaTopicApi.getPartitionInfo.method,
       }).then((res) => {
+        this.loading = false;
         if (res.code != 0) {
           notification.error({
             message: "error",
@@ -86,6 +91,7 @@ export default {
       });
     },
     handleCancel() {
+      this.data = [];
       this.$emit("closePartitionInfoDialog", {});
     },
   },
diff --git a/ui/src/views/topic/Topic.vue b/ui/src/views/topic/Topic.vue
index c871c98..9901ec8 100644
--- a/ui/src/views/topic/Topic.vue
+++ b/ui/src/views/topic/Topic.vue
@@ -1,80 +1,82 @@
 <template>
   <div class="content">
-    <div class="topic">
-      <div id="components-form-topic-advanced-search">
-        <a-form
-          class="ant-advanced-search-form"
-          :form="form"
-          @submit="handleSearch"
-        >
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item :label="`topic`">
-                <a-input
-                  placeholder="topic"
-                  class="input-w"
-                  v-decorator="['topic']"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item :label="`类型`">
-                <a-select
-                  class="type-select"
-                  v-decorator="['type', { initialValue: 'all' }]"
-                  placeholder="Please select a country"
-                >
-                  <a-select-option value="all"> 所有 </a-select-option>
-                  <a-select-option value="normal"> 普通 </a-select-option>
-                  <a-select-option value="system"> 系统 </a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-
-            <a-col :span="8" :style="{ textAlign: 'right' }">
-              <a-form-item>
-                <a-button type="primary" html-type="submit"> 搜索</a-button>
-                <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
-                  重置
-                </a-button>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div>
-      <div class="operation-row-button">
-        <a-button type="primary" @click="handleReset">新增/更新</a-button>
-      </div>
-      <a-table :columns="columns" :data-source="data" bordered row-key="name">
-        <div slot="partitions" slot-scope="text, record">
-          <a href="#" @click="openPartitionInfoDialog(record.name)"
-            >{{ text }}
-          </a>
-        </div>
-
-        <div slot="internal" slot-scope="text">
-          <span v-if="text" style="color: red">是</span><span v-else>否</span>
-        </div>
-
-        <div slot="operation" slot-scope="record" v-show="!record.internal">
-          <a-popconfirm
-            :title="'删除topic: ' + record.name + '？'"
-            ok-text="确认"
-            cancel-text="取消"
-            @confirm="deleteTopic(record.name)"
+    <a-spin :spinning="loading">
+      <div class="topic">
+        <div id="components-form-topic-advanced-search">
+          <a-form
+            class="ant-advanced-search-form"
+            :form="form"
+            @submit="handleSearch"
           >
-            <a-button size="small" href="javascript:;" class="operation-btn"
-              >删除</a-button
-            >
-          </a-popconfirm>
+            <a-row :gutter="24">
+              <a-col :span="8">
+                <a-form-item :label="`topic`">
+                  <a-input
+                    placeholder="topic"
+                    class="input-w"
+                    v-decorator="['topic']"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item :label="`类型`">
+                  <a-select
+                    class="type-select"
+                    v-decorator="['type', { initialValue: 'all' }]"
+                    placeholder="Please select a country"
+                  >
+                    <a-select-option value="all"> 所有</a-select-option>
+                    <a-select-option value="normal"> 普通</a-select-option>
+                    <a-select-option value="system"> 系统</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+
+              <a-col :span="8" :style="{ textAlign: 'right' }">
+                <a-form-item>
+                  <a-button type="primary" html-type="submit"> 搜索</a-button>
+                  <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
+                    重置
+                  </a-button>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
         </div>
-      </a-table>
-      <PartitionInfo
-        :topic="selectDetail.resourceName"
-        :visible="showPartitionInfo"
-        @closePartitionInfoDialog="closePartitionInfoDialog"
-      ></PartitionInfo>
-    </div>
+        <div class="operation-row-button">
+          <a-button type="primary" @click="handleReset">新增/更新</a-button>
+        </div>
+        <a-table :columns="columns" :data-source="data" bordered row-key="name">
+          <div slot="partitions" slot-scope="text, record">
+            <a href="#" @click="openPartitionInfoDialog(record.name)"
+              >{{ text }}
+            </a>
+          </div>
+
+          <div slot="internal" slot-scope="text">
+            <span v-if="text" style="color: red">是</span><span v-else>否</span>
+          </div>
+
+          <div slot="operation" slot-scope="record" v-show="!record.internal">
+            <a-popconfirm
+              :title="'删除topic: ' + record.name + '？'"
+              ok-text="确认"
+              cancel-text="取消"
+              @confirm="deleteTopic(record.name)"
+            >
+              <a-button size="small" href="javascript:;" class="operation-btn"
+                >删除
+              </a-button>
+            </a-popconfirm>
+          </div>
+        </a-table>
+        <PartitionInfo
+          :topic="selectDetail.resourceName"
+          :visible="showPartitionInfo"
+          @closePartitionInfoDialog="closePartitionInfoDialog"
+        ></PartitionInfo>
+      </div>
+    </a-spin>
   </div>
 </template>
 
@@ -83,6 +85,7 @@ import request from "@/utils/request";
 import { KafkaTopicApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
 import PartitionInfo from "@/views/topic/PartitionInfo";
+
 export default {
   name: "Topic",
   components: { PartitionInfo },
@@ -101,6 +104,7 @@ export default {
         username: "",
       },
       showPartitionInfo: false,
+      loading: false,
     };
   },
   methods: {
@@ -115,11 +119,13 @@ export default {
 
     getTopicList() {
       Object.assign(this.queryParam, this.form.getFieldsValue());
+      this.loading = true;
       request({
         url: KafkaTopicApi.getTopicList.url,
         method: KafkaTopicApi.getTopicList.method,
         params: this.queryParam,
       }).then((res) => {
+        this.loading = false;
         this.data = res.data;
       });
     },