diff --git a/core/frontend/src/views/dataFilling/form/CreateTask.vue b/core/frontend/src/views/dataFilling/form/CreateTask.vue
index 834e890c87..7008298cf7 100644
--- a/core/frontend/src/views/dataFilling/form/CreateTask.vue
+++ b/core/frontend/src/views/dataFilling/form/CreateTask.vue
@@ -1,5 +1,8 @@
 <template>
-  <el-container class="DataFillingSave">
+  <el-container
+    v-loading="loading"
+    class="DataFillingSave"
+  >
     <el-header class="de-header">
       <div class="panel-info-area">
         <span class="text16 margin-left12">
@@ -320,6 +323,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       showTable: false,
       showMedia: false,
       formType: 'add',
@@ -549,6 +553,8 @@ export default {
     },
 
     save() {
+      this.loading = true
+
       const request = this.form
 
       request.rateType = -1
@@ -609,8 +615,11 @@ export default {
 
           saveFormTasks(this.formId, param.request).then(res => {
             this.$emit('save-success')
+          }).finally(() => {
+            this.loading = false
           })
         } else {
+          this.loading = false
           return false
         }
       })
diff --git a/core/frontend/src/views/dataFilling/form/EditFormData.vue b/core/frontend/src/views/dataFilling/form/EditFormData.vue
index 3040adf625..ba76fcdd5d 100644
--- a/core/frontend/src/views/dataFilling/form/EditFormData.vue
+++ b/core/frontend/src/views/dataFilling/form/EditFormData.vue
@@ -60,6 +60,7 @@ export default {
       callback()
     }
     return {
+      loading: false,
       formData: {},
       requiredRule: { required: true, message: this.$t('commons.required'), trigger: ['blur', 'change'] },
       dateRangeRequiredRule: { validator: checkDateRangeRequireValidator, message: this.$t('commons.required'), trigger: ['blur', 'change'] },
@@ -135,6 +136,7 @@ export default {
       })
     },
     doSave() {
+      this.loading = true
       this.$refs['mForm'].validate((valid) => {
         if (valid) {
           const _data = {}
@@ -167,20 +169,28 @@ export default {
           if (this.userTaskId) {
             userFillFormData(this.userTaskId, _data).then(res => {
               this.$emit('save-success')
+            }).finally(() => {
+              this.loading = false
             })
           } else {
             if (this.id !== undefined) {
               // update
               saveFormRowData(this.formId, this.id, _data).then(res => {
                 this.$emit('save-success')
+              }).finally(() => {
+                this.loading = false
               })
             } else {
               // insert
               newFormRowData(this.formId, _data).then(res => {
                 this.$emit('save-success')
+              }).finally(() => {
+                this.loading = false
               })
             }
           }
+        } else {
+          this.loading = false
         }
       })
     }
@@ -190,7 +200,10 @@ export default {
 </script>
 
 <template>
-  <el-container class="DataFillingSave">
+  <el-container
+    v-loading="loading"
+    class="DataFillingSave"
+  >
     <el-header class="de-header">
       <div class="panel-info-area">
         <span class="text16 margin-left12">
diff --git a/core/frontend/src/views/dataFilling/form/save.vue b/core/frontend/src/views/dataFilling/form/save.vue
index 1609db0e78..356c23de91 100644
--- a/core/frontend/src/views/dataFilling/form/save.vue
+++ b/core/frontend/src/views/dataFilling/form/save.vue
@@ -86,6 +86,7 @@ export default {
       callback()
     }
     return {
+      loading: false,
       requiredRule: { required: true, message: this.$t('commons.required'), trigger: ['blur', 'change'] },
       duplicateRule: { validator: checkDuplicateNameValidator, trigger: 'blur' },
       duplicateIndexRule: { validator: checkDuplicateIndexNameValidator, trigger: 'blur' },
@@ -249,6 +250,7 @@ export default {
       return data.name.indexOf(value) !== -1
     },
     doSave() {
+      this.loading = true
       this.$refs['mRightForm'].validate((valid) => {
         if (valid) {
           const data = {
@@ -265,8 +267,11 @@ export default {
           saveForm(data).then(res => {
             this.closeSave()
             this.$router.replace({ name: 'data-filling-form', query: { id: res.data }})
+          }).finally(() => {
+            this.loading = false
           })
         } else {
+          this.loading = false
           return false
         }
       })
@@ -276,7 +281,10 @@ export default {
 </script>
 
 <template>
-  <el-container class="DataFillingFormSave">
+  <el-container
+    v-loading="loading"
+    class="DataFillingFormSave"
+  >
     <el-header class="de-header">
       <div class="panel-info-area">
         <span class="text16 margin-left12">