diff --git a/src/store/modules/async-profiling.ts b/src/store/modules/async-profiling.ts
index b4beb1a1..2ce5b0b6 100644
--- a/src/store/modules/async-profiling.ts
+++ b/src/store/modules/async-profiling.ts
@@ -34,6 +34,7 @@ interface AsyncProfilingState {
   taskProgress: Recordable<AsyncProfilerTaskProgress>;
   instances: Instance[];
   analyzeTrees: AsyncProfilerStackElement[];
+  loadingTree: boolean;
 }
 
 export const asyncProfilingStore = defineStore({
@@ -44,6 +45,7 @@ export const asyncProfilingStore = defineStore({
     taskProgress: {},
     instances: [],
     analyzeTrees: [],
+    loadingTree: false,
   }),
   actions: {
     setSelectedTask(task: Recordable<AsyncProfilingTask>) {
@@ -111,8 +113,9 @@ export const asyncProfilingStore = defineStore({
       if (!params.instanceIds.length) {
         return new Promise((resolve) => resolve({}));
       }
+      this.loadingTree = true;
       const res: AxiosResponse = await graphql.query("getAsyncProfileAnalyze").params({ request: params });
-
+      this.loadingTree = false;
       if (res.data.errors) {
         this.analyzeTrees = [];
         return res.data;
diff --git a/src/views/dashboard/related/async-profiling/Content.vue b/src/views/dashboard/related/async-profiling/Content.vue
index a0e8b079..f8768ff8 100644
--- a/src/views/dashboard/related/async-profiling/Content.vue
+++ b/src/views/dashboard/related/async-profiling/Content.vue
@@ -19,7 +19,7 @@ limitations under the License. -->
       <div class="mb-20">
         <Filter />
       </div>
-      <div class="stack">
+      <div class="stack" v-loading="asyncProfilingStore.loadingTree">
         <EBPFStack :type="ComponentType" />
       </div>
     </div>
diff --git a/src/views/dashboard/related/async-profiling/components/NewTask.vue b/src/views/dashboard/related/async-profiling/components/NewTask.vue
index 0c486092..b89b4249 100644
--- a/src/views/dashboard/related/async-profiling/components/NewTask.vue
+++ b/src/views/dashboard/related/async-profiling/components/NewTask.vue
@@ -43,7 +43,7 @@ limitations under the License. -->
       <el-input size="small" class="profile-input" v-model="execArgs" />
     </div>
     <div>
-      <el-button @click="createTask" type="primary" class="create-task-btn">
+      <el-button @click="createTask" type="primary" class="create-task-btn" :loading="loading">
         {{ t("createTask") }}
       </el-button>
     </div>
@@ -67,6 +67,7 @@ limitations under the License. -->
   const asyncEvents = ref<string[]>([ProfilingEvents[0].value]);
   const duration = ref<string>(DurationOptions[0].value);
   const execArgs = ref<string>("");
+  const loading = ref<boolean>(false);
 
   function changeDuration(val: string) {
     duration.value = val;
@@ -84,7 +85,9 @@ limitations under the License. -->
       events: asyncEvents.value,
       execArgs: execArgs.value,
     };
+    loading.value = true;
     const res = await asyncProfilingStore.createTask(params);
+    loading.value = false;
     if (res.errors) {
       ElMessage.error(res.errors);
       return;
@@ -118,7 +121,7 @@ limitations under the License. -->
   }
 
   .create-task-btn {
-    width: 300px;
+    width: 600px;
     margin-top: 50px;
   }
 </style>
diff --git a/src/views/dashboard/related/async-profiling/components/TaskList.vue b/src/views/dashboard/related/async-profiling/components/TaskList.vue
index 05e373de..205bf594 100644
--- a/src/views/dashboard/related/async-profiling/components/TaskList.vue
+++ b/src/views/dashboard/related/async-profiling/components/TaskList.vue
@@ -13,42 +13,40 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="profile-task-list flex-v">
-    <div class="profile-task-wrapper flex-v">
-      <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
-      <div class="profile-t-wrapper">
-        <div class="no-data" v-show="!asyncProfilingStore.taskList.length">
-          {{ t("noData") }}
-        </div>
-        <table class="profile-t">
-          <tr
-            class="profile-tr cp"
-            v-for="(i, index) in asyncProfilingStore.taskList"
-            @click="changeTask(i)"
-            :key="index"
-            :class="{
-              selected: asyncProfilingStore.selectedTask.id === i.id,
-            }"
-          >
-            <td class="profile-td">
-              <div class="ell">
-                <span>{{ i.id }}</span>
-                <a class="profile-btn r" @click="() => (showDetail = true)">
-                  <Icon iconName="view" size="middle" />
-                </a>
-              </div>
-              <div class="grey ell sm">
-                <span class="mr-10 sm">
-                  {{ dateFormat(i.createTime) }}
-                </span>
-                <span class="mr-10 sm">
-                  {{ dateFormat(i.createTime + i.duration * 60 * 1000) }}
-                </span>
-              </div>
-            </td>
-          </tr>
-        </table>
+  <div class="profile-task-list flex-v" v-loading="loading">
+    <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
+    <div class="profile-t-wrapper">
+      <div class="no-data" v-show="!asyncProfilingStore.taskList.length">
+        {{ t("noData") }}
       </div>
+      <table class="profile-t">
+        <tr
+          class="profile-tr cp"
+          v-for="(i, index) in asyncProfilingStore.taskList"
+          @click="changeTask(i)"
+          :key="index"
+          :class="{
+            selected: asyncProfilingStore.selectedTask.id === i.id,
+          }"
+        >
+          <td class="profile-td">
+            <div class="ell">
+              <span>{{ i.id }}</span>
+              <a class="profile-btn r" @click="() => (showDetail = true)">
+                <Icon iconName="view" size="middle" />
+              </a>
+            </div>
+            <div class="grey ell sm">
+              <span class="mr-10 sm">
+                {{ dateFormat(i.createTime) }}
+              </span>
+              <span class="mr-10 sm">
+                {{ dateFormat(i.createTime + i.duration * 60 * 1000) }}
+              </span>
+            </div>
+          </td>
+        </tr>
+      </table>
     </div>
   </div>
   <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
@@ -143,13 +141,16 @@ limitations under the License. -->
   const instanceLogs = ref<TaskLog | any>({});
   const errorInstances = ref<Instance[]>([]);
   const successInstances = ref<Instance[]>([]);
+  const loading = ref<boolean>(false);
 
   onMounted(() => {
     fetchTasks();
   });
 
   async function fetchTasks() {
+    loading.value = true;
     const res = await asyncProfilingStore.getTaskList();
+    loading.value = false;
     if (res.errors) {
       return ElMessage.error(res.errors);
     }