主题设置页面加载效果

src/views/interface/ThemeList.vue

@@ -36,14 +36,17 @@
     >
       <a-row :gutter="12" type="flex">
         <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 10}">
             <img
               v-if="themeProperty"
               :alt="themeProperty.name"
               :src="themeProperty.screenshots"
               width="100%"
             >
+          </a-skeleton>
         </a-col>
         <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
             <a-tabs defaultActiveKey="0">
               <a-tab-pane
                 v-for="(group, index) in themeConfiguration"
@@ -110,7 +113,8 @@
                 </a-form-item>
               </a-tab-pane>
             </a-tabs>
-        </a-col>
+            <a-skeleton :loading="optionLoading">
+            </a-skeleton></a-skeleton></a-col>
       </a-row>
     </a-drawer>
   </page-view>
@@ -127,6 +131,7 @@ export default {
   },
   data() {
     return {
+      optionLoading: true,
       wrapperCol: {
         xl: { span: 12 },
         lg: { span: 12 },
@@ -163,6 +168,7 @@ export default {
           that.loadSettings()
           that.getThemeProperty(themeId)
         })
+        that.optionLoading = false
       }, 500)
     },
     activeTheme(theme) {
@@ -196,6 +202,7 @@ export default {
       this.visible = false
       this.themeConfiguration = {}
       this.themeProperty = {}
+      this.optionLoading = true
     }
   }
 }