fix(Skeleton): fix the problem of invalid loading default value

Author: anlyyao

src/skeleton/__test__/__snapshots__/demo.test.js.snap

@@ -223,7 +223,6 @@ exports[`Skeleton Skeleton theme demo works fine 1`] = `
       class="demo-section__content"
     >
       <t-skeleton
-        loading="{{true}}"
         theme="avatar"
       />
     </wx-view>
@@ -238,7 +237,6 @@ exports[`Skeleton Skeleton theme demo works fine 1`] = `
       class="demo-section__content"
     >
       <t-skeleton
-        loading="{{true}}"
         theme="image"
       />
     </wx-view>
@@ -253,7 +251,6 @@ exports[`Skeleton Skeleton theme demo works fine 1`] = `
       class="demo-section__content"
     >
       <t-skeleton
-        loading="{{true}}"
         theme="text"
       />
     </wx-view>
@@ -268,7 +265,6 @@ exports[`Skeleton Skeleton theme demo works fine 1`] = `
       class="demo-section__content"
     >
       <t-skeleton
-        loading="{{true}}"
         theme="paragraph"
       />
     </wx-view>

src/skeleton/__test__/index.test.js

@@ -26,7 +26,7 @@ describe('skeleton', () => {
   describe('Props', () => {
     it(`: style && customStyle`, async () => {
       const id = simulate.load({
-        template: `<t-skeleton class="skeleton" style="{{style}}" customStyle="{{customStyle}}" loading="{{true}}"></t-skeleton>`,
+        template: `<t-skeleton class="skeleton" style="{{style}}" customStyle="{{customStyle}}"></t-skeleton>`,
         usingComponents: {
           't-skeleton': skeleton,
         },

src/skeleton/_example/skeleton.ts

@@ -1,26 +1 @@
-Page({
-  data: {
-    themeList: [
-      {
-        title: '头像骨架屏',
-        value: 'avatar',
-        loading: true,
-      },
-      {
-        title: '图片骨架屏',
-        value: 'image',
-        loading: true,
-      },
-      {
-        title: '文本骨架屏',
-        value: 'text',
-        loading: true,
-      },
-      {
-        title: '段落骨架屏',
-        value: 'paragraph',
-        loading: true,
-      },
-    ],
-  },
-});
+Page({});

src/skeleton/_example/theme/index.js

@@ -4,22 +4,18 @@ Component({
       {
         title: '头像骨架屏',
         value: 'avatar',
-        loading: true,
       },
       {
         title: '图片骨架屏',
         value: 'image',
-        loading: true,
       },
       {
         title: '文本骨架屏',
         value: 'text',
-        loading: true,
       },
       {
         title: '段落骨架屏',
         value: 'paragraph',
-        loading: true,
       },
     ],
   },

src/skeleton/_example/theme/index.wxml

@@ -1,6 +1,6 @@
 <view wx:for="{{themeList}}" wx:for-item="themeItem" wx:key="index">
   <view class="demo-section__desc">{{themeItem.title}}</view>
   <view class="demo-section__content">
-    <t-skeleton theme="{{themeItem.value}}" loading="{{themeItem.loading}}"></t-skeleton>
+    <t-skeleton theme="{{themeItem.value}}"></t-skeleton>
   </view>
 </view>

src/skeleton/skeleton.ts

@@ -37,24 +37,15 @@ export default class Skeleton extends SuperComponent {
     rowCol() {
       this.init();
     },
-    'loading,delay'(loading: boolean, delay: number) {
-      if (!loading || delay === 0) {
-        this.setData({
-          isShow: loading,
-        });
-        return;
-      }
-      setTimeout(() => {
-        this.setData({
-          isShow: loading,
-        });
-      }, delay);
+    'loading, delay'() {
+      this.isShowSkeleton();
     },
   };
 
   lifetimes = {
     attached() {
       this.init();
+      this.isShowSkeleton();
     },
   };
 
@@ -134,5 +125,20 @@ export default class Skeleton extends SuperComponent {
       });
       return style;
     },
+
+    isShowSkeleton() {
+      const { loading, delay } = this.properties;
+      if (!loading || delay === 0) {
+        this.setData({
+          isShow: loading,
+        });
+        return;
+      }
+      setTimeout(() => {
+        this.setData({
+          isShow: loading,
+        });
+      }, delay);
+    },
   };
 }