Add loading for post settings.

src/views/post/PostList.vue

@@ -490,11 +490,11 @@ export default {
       }
     },
     handleShowPostSettings(post) {
-      this.postSettingVisible = true
       postApi.get(post.id).then(response => {
         this.selectedPost = response.data.data
         this.selectedTagIds = this.selectedPost.tagIds
         this.selectedCategoryIds = this.selectedPost.categoryIds
+        this.postSettingVisible = true
       })
     },
     // 关闭文章设置抽屉

src/views/post/components/PostSetting.vue

@@ -7,6 +7,11 @@
     @close="onClose"
     destroyOnClose
     :visible="visiable"
+  >
+    <a-skeleton
+      active
+      :loading="settingLoading"
+      :paragraph="{ rows: 24 }"
     >
       <div class="post-setting-drawer-content">
         <div :style="{ marginBottom: '16px' }">
@@ -171,6 +176,7 @@
           v-if="saveButton"
         >保存</a-button>
       </div>
+    </a-skeleton>
   </a-drawer>
 </template>
 <script>
@@ -196,6 +202,7 @@ export default {
     return {
       thumDrawerVisible: false,
       categoryFormVisible: false,
+      settingLoading: true,
       options: [],
       keys: ['blog_url'],
       selectedPost: this.post,
@@ -249,6 +256,7 @@ export default {
     }
   },
   created() {
+    this.loadSkeleton()
     this.loadOptions()
     this.loadCategories()
   },
@@ -270,6 +278,11 @@ export default {
     },
     selectedCategoryIds(val) {
       this.$emit('onRefreshCategoryIds', val)
+    },
+    visiable: function(newValue, oldValue) {
+      if (newValue) {
+        this.loadSkeleton()
+      }
     }
   },
   computed: {
@@ -282,6 +295,12 @@ export default {
     }
   },
   methods: {
+    loadSkeleton() {
+      this.settingLoading = true
+      setTimeout(() => {
+        this.settingLoading = false
+      }, 500)
+    },
     loadOptions() {
       optionApi.listAll(this.keys).then(response => {
         this.options = response.data.data