diff --git a/package.json b/package.json
index 8405c68..0bc321b 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "v3-infinite-loading": "^1.2.2",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "vue-spinner": "^1.0.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",
diff --git a/src/api/tenant/init.js b/src/api/tenant/init.js
index 66a212e..695c0b6 100644
--- a/src/api/tenant/init.js
+++ b/src/api/tenant/init.js
@@ -1,25 +1,25 @@
 import request from "@/utils/request";
 
 export const check = (tenantId) => {
-    return request({
-        url: `/tenant/init/check/${tenantId}`,
-        method: "POST",
-    });
+  return request({
+    url: `/tenant/init/check/${tenantId}`,
+    method: "POST",
+  });
 };
 
 // /tenant/init/createTables/{tenantId}
 export const createTables = (tenantId) => {
-    return request({
-        url: `/tenant/init/createTables/${tenantId}`,
-        method: "POST",
-    });
+  return request({
+    url: `/tenant/init/createTables/${tenantId}`,
+    method: "POST",
+  });
 };
 
 // /tenant/init/initData/{tenantId}
 export const initData = (tenantId) => {
-    return request({
-        url: `/tenant/init/initData/${tenantId}`,
-        method: "POST",
-        timeout: 0,
-    });
-}
\ No newline at end of file
+  return request({
+    url: `/tenant/init/initData/${tenantId}`,
+    method: "POST",
+    timeout: 0,
+  });
+};
diff --git a/src/views/tenant/initialize.vue b/src/views/tenant/initialize.vue
index 7a185b2..300f9a8 100644
--- a/src/views/tenant/initialize.vue
+++ b/src/views/tenant/initialize.vue
@@ -1,24 +1,33 @@
 <template>
   <div class="app-container">
     <el-steps
-        :active="activeStep"
-        :process-status="
+      :active="activeStep"
+      :process-status="
         currentStepStatus === 0
           ? 'error'
           : currentStepStatus === 1
           ? 'process'
           : 'success'
       "
-        align-center
-        class="init-steps"
-        finish-status="success"
+      align-center
+      class="init-steps"
+      finish-status="success"
     >
-      <el-step description="初始化开始" title="开始"/>
-      <el-step description="步骤描述" title="检查"/>
-      <el-step description="步骤描述" title="步骤2"/>
-      <el-step description="步骤描述" title="步骤3"/>
+      <el-step description="初始化开始" title="开始" />
+      <el-step description="步骤描述" title="检查" />
+      <el-step description="步骤描述" title="步骤2" />
+      <el-step description="步骤描述" title="步骤3" />
     </el-steps>
-    <div class="steps-content">
+    <el-row v-if="loading" justify="center">
+      <el-col :span="1.5">
+        <div class="btn-loading">
+          <el-icon size="80">
+            <refresh />
+          </el-icon>
+        </div>
+      </el-col>
+    </el-row>
+    <div v-else class="steps-content">
       <div v-if="activeStep === 0" class="start-step">
         <el-row justify="center">
           <el-col :span="1.5">
@@ -28,17 +37,17 @@
       </div>
       <div v-else-if="activeStep === 1">
         <el-alert
-            v-if="currentStepStatus === 0"
-            :closable="false"
-            :type="
+          v-if="currentStepStatus === 0"
+          :closable="false"
+          :type="
             currentStepStatus === 0
               ? 'error'
               : currentStepStatus === 1
               ? 'info'
               : 'success'
           "
-            show-icon
-        >错误码: {{ tenantInitCheckResult.result }}, 错误信息:
+          show-icon
+          >错误码: {{ tenantInitCheckResult.result }}, 错误信息:
           {{ tenantInitCheckResult.msg }}
         </el-alert>
         <el-row style="margin-top: 36px">
@@ -53,26 +62,26 @@
                 <div class="card-content-item">
                   <span class="card-content-item-title">租户名称:</span>
                   <span class="card-content-item-value">{{
-                      tenantInitCheckResult.tenantName
-                    }}</span>
+                    tenantInitCheckResult.tenantName
+                  }}</span>
                 </div>
                 <!--模式-->
                 <div class="card-content-item">
                   <span class="card-content-item-title">模式:</span>
                   <span class="card-content-item-value">{{
-                      tenantModeDict.find(
-                          (item) => item.value === tenantInitCheckResult.mode
-                      )?.label
-                    }}</span>
+                    tenantModeDict.find(
+                      (item) => item.value === tenantInitCheckResult.mode
+                    )?.label
+                  }}</span>
                 </div>
               </div>
             </div>
           </el-col>
           <el-col :span="12">
             <div
-                v-if="tenantInitCheckResult.datasource"
-                class="data-card init-check-base-data"
-                style="margin-left: 24px"
+              v-if="tenantInitCheckResult.datasource"
+              class="data-card init-check-base-data"
+              style="margin-left: 24px"
             >
               <div class="card-title">
                 <span>数据源数据</span>
@@ -81,43 +90,43 @@
                 <div class="card-content-item">
                   <span class="card-content-item-title">数据库IP:</span>
                   <span class="card-content-item-value">{{
-                      tenantInitCheckResult.datasource.ip
-                    }}</span>
+                    tenantInitCheckResult.datasource.ip
+                  }}</span>
                 </div>
                 <!--                端口-->
                 <div class="card-content-item">
                   <span class="card-content-item-title">端口:</span>
                   <span class="card-content-item-value">{{
-                      tenantInitCheckResult.datasource.port
-                    }}</span>
+                    tenantInitCheckResult.datasource.port
+                  }}</span>
                 </div>
                 <!--模式-->
                 <div class="card-content-item">
                   <span class="card-content-item-title">类型:</span>
                   <span class="card-content-item-value">{{
-                      tenantInitCheckResult.datasource.type
-                    }}</span>
+                    tenantInitCheckResult.datasource.type
+                  }}</span>
                 </div>
                 <!--                数据库名称-->
                 <div class="card-content-item">
                   <span class="card-content-item-title">数据库名称:</span>
                   <span class="card-content-item-value">{{
-                      tenantInitCheckResult.datasource.dbName
-                    }}</span>
+                    tenantInitCheckResult.datasource.dbName
+                  }}</span>
                 </div>
                 <!--                用户名-->
                 <div class="card-content-item">
                   <span class="card-content-item-title">用户名:</span>
                   <span class="card-content-item-value">{{
-                      tenantInitCheckResult.datasource.username
-                    }}</span>
+                    tenantInitCheckResult.datasource.username
+                  }}</span>
                 </div>
                 <!--                密码-->
                 <div class="card-content-item">
                   <span class="card-content-item-title">密码:</span>
                   <span class="card-content-item-value">{{
-                      tenantInitCheckResult.datasource.password
-                    }}</span>
+                    tenantInitCheckResult.datasource.password
+                  }}</span>
                 </div>
               </div>
             </div>
@@ -126,16 +135,16 @@
         <el-row justify="center" style="margin-top: 24px">
           <el-col :span="1.5">
             <div
-                v-if="currentStepStatus === 0"
-                class="circle-button error"
-                @click="router.push({ path: '/tenant/tenant' })"
+              v-if="currentStepStatus === 0"
+              class="circle-button error"
+              @click="router.push({ path: '/tenant/tenant' })"
             >
               关闭
             </div>
             <div
-                v-else-if="currentStepStatus === 2"
-                class="circle-button"
-                @click="createDatabase"
+              v-else-if="currentStepStatus === 2"
+              class="circle-button"
+              @click="createDatabase"
             >
               创建库
             </div>
@@ -143,41 +152,57 @@
         </el-row>
       </div>
       <template v-else-if="activeStep === 2">
-        <el-alert v-if="currentStepStatus === 0" :closable="false" show-icon type="error"
-        >错误码: {{ createTablesResult.result }}, 错误信息:
+        <el-alert
+          v-if="currentStepStatus === 0"
+          :closable="false"
+          show-icon
+          type="error"
+          >错误码: {{ createTablesResult.result }}, 错误信息:
           {{ createTablesResult.msg }}
-        </el-alert
-        >
+        </el-alert>
         <el-row justify="center" style="margin-top: 24px">
           <el-col :span="1.5">
             <div
-                v-if="currentStepStatus === 0"
-                class="circle-button error"
-                @click="router.push({ path: '/tenant/tenant' })"
+              v-if="currentStepStatus === 0"
+              class="circle-button error"
+              @click="router.push({ path: '/tenant/tenant' })"
             >
               关闭
             </div>
-            <div v-else-if="currentStepStatus === 2" class="circle-button" @click="importData">导入数据</div>
+            <div
+              v-else-if="currentStepStatus === 2"
+              class="circle-button"
+              @click="importData"
+            >
+              <span>导入数据</span>
+            </div>
           </el-col>
         </el-row>
       </template>
       <template v-else-if="activeStep === 3">
-        <el-alert v-if="currentStepStatus === 0" :closable="false" show-icon type="error"
-        >错误码: {{ initDataResult.result }}, 错误信息:
+        <el-alert
+          v-if="currentStepStatus === 0"
+          :closable="false"
+          show-icon
+          type="error"
+          >错误码: {{ initDataResult.result }}, 错误信息:
           {{ initDataResult.msg }}
-        </el-alert
-        >
+        </el-alert>
         <el-row justify="center" style="margin-top: 24px">
           <el-col :span="1.5">
             <div
-                v-if="currentStepStatus === 0"
-                class="circle-button error"
-                @click="router.push({ path: '/tenant/tenant' })"
+              v-if="currentStepStatus === 0"
+              class="circle-button error"
+              @click="router.push({ path: '/tenant/tenant' })"
             >
               关闭
             </div>
-            <div v-else-if="currentStepStatus===2" class="circle-button finish"
-                 @click="router.push({ path: '/tenant/tenant' })">完成
+            <div
+              v-else-if="currentStepStatus === 2"
+              class="circle-button finish"
+              @click="router.push({ path: '/tenant/tenant' })"
+            >
+              完成
             </div>
           </el-col>
         </el-row>
@@ -186,21 +211,22 @@
   </div>
 </template>
 <script setup>
-import {onMounted, reactive, ref, toRefs, watchEffect} from "vue";
-import {check, createTables, initData} from "@/api/tenant/init";
-import {useRoute, useRouter} from "vue-router";
-import {tenantModeDict} from "@/constant/dict";
+import { onMounted, reactive, ref, toRefs, watchEffect } from "vue";
+import { check, createTables, initData } from "@/api/tenant/init";
+import { useRoute, useRouter } from "vue-router";
+import { tenantModeDict } from "@/constant/dict";
+import { RefreshRight, Refresh } from "@element-plus/icons-vue";
 
 const route = useRoute();
 const router = useRouter();
 const activeStep = ref(0);
 const currentStepStatus = ref(1); // 0: error 1: process 2: finish
 const tenantId = ref(undefined);
-
+const loading = ref(false);
 if (route.query.id) {
   tenantId.value = route.query.id;
 } else {
-  router.push({path: "/tenant/tenant"});
+  router.push({ path: "/tenant/tenant" });
 }
 
 const data = reactive({
@@ -209,64 +235,82 @@ const data = reactive({
   initDataResult: {},
 });
 
-const {tenantInitCheckResult, createTablesResult, initDataResult} = toRefs(data);
+const { tenantInitCheckResult, createTablesResult, initDataResult } =
+  toRefs(data);
 const tenantInitCheck = () => {
   activeStep.value = 1;
   currentStepStatus.value = 1;
-  check(tenantId.value).then((resp) => {
-    tenantInitCheckResult.value = resp;
-    if (resp.result === 200) {
+  check(tenantId.value)
+    .then((resp) => {
+      tenantInitCheckResult.value = resp;
+      if (resp.result === 200) {
+        currentStepStatus.value = 2;
+      } else {
+        currentStepStatus.value = 0;
+      }
+    })
+    .catch(() => {
       currentStepStatus.value = 2;
-    } else {
-      currentStepStatus.value = 0;
-    }
-  }).catch(() => {
-    currentStepStatus.value = 2;
-    activeStep.value = 2;
-  });
+      activeStep.value = 2;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 
 //  第二步: 创建数据库
 const createDatabase = () => {
+  loading.value = true;
   activeStep.value = 2;
   currentStepStatus.value = 1;
-  createTables(tenantId.value).then((resp) => {
-    createTablesResult.value = resp;
-    if (resp.result === 200) {
+  createTables(tenantId.value)
+    .then((resp) => {
+      createTablesResult.value = resp;
+      if (resp.result === 200) {
+        currentStepStatus.value = 2;
+      } else {
+        currentStepStatus.value = 0;
+      }
+    })
+    .catch(() => {
       currentStepStatus.value = 2;
-    } else {
-      currentStepStatus.value = 0;
-    }
-  }).catch(() => {
-    currentStepStatus.value = 2;
-    activeStep.value = 2;
-  });
+      activeStep.value = 2;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 
 // 第三步,导入数据
 const importData = () => {
+  loading.value = true;
   activeStep.value = 3;
   currentStepStatus.value = 1;
-  initData(tenantId.value).then((resp) => {
-    initDataResult.value = resp;
-    if (resp.result === 200) {
+  initData(tenantId.value)
+    .then((resp) => {
+      initDataResult.value = resp;
+      if (resp.result === 200) {
+        currentStepStatus.value = 2;
+      } else {
+        currentStepStatus.value = 0;
+      }
+    })
+    .catch(() => {
       currentStepStatus.value = 2;
-    } else {
-      currentStepStatus.value = 0;
-    }
-  }).catch(() => {
-    currentStepStatus.value = 2;
-    activeStep.value = 2;
-  });
+      activeStep.value = 2;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 
 onMounted(() => {
   watchEffect(() => {
     let progressLineWidth =
-        ((activeStep.value - 1) * 100 +
-            Math.abs(currentStepStatus.value - 1) * 30 +
-            70)
-    progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth
+      (activeStep.value - 1) * 100 +
+      Math.abs(currentStepStatus.value - 1) * 30 +
+      70;
+    progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth;
     let progressLineColor;
     if (currentStepStatus.value === 0) {
       const percent = ((activeStep.value - 1) / activeStep.value) * 100;
@@ -276,11 +320,11 @@ onMounted(() => {
       progressLineColor = `linear-gradient(to right, #67c23a ${100}%, #f56c6c ${100}%)`;
     }
     document
-        .querySelector(".app-container")
-        .style.setProperty("--progress-line-color", progressLineColor);
+      .querySelector(".app-container")
+      .style.setProperty("--progress-line-color", progressLineColor);
     document
-        .querySelector(".app-container")
-        .style.setProperty("--progress-line-width", progressLineWidth + "%");
+      .querySelector(".app-container")
+      .style.setProperty("--progress-line-width", progressLineWidth + "%");
   });
 });
 </script>
@@ -337,6 +381,22 @@ onMounted(() => {
   }
 }
 
+.btn-loading {
+  margin-top: 80px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #409eff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .el-icon {
+    animation: spin 1s linear infinite;
+    color: white;
+  }
+}
+
 .circle-button {
   width: 100px;
   height: 100px;
@@ -438,4 +498,13 @@ onMounted(() => {
     }
   }
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>