feat(module:skeleton):add skeleton component (NG-ZORRO#1829)

* feat(module:skeleton): add skeleton component

* fix(component:skeleton):sync demo to antd

components/card/demo/loading.ts

@@ -3,15 +3,33 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-card-loading',
   template: `
-    <nz-card [nzLoading]="loading" nzTitle="Card title">
-      Whatever content
+    <nz-switch [(ngModel)]="loading"></nz-switch>
+    <nz-card
+      style="width: 300px;margin-top: 16px"
+      [nzLoading]="loading">
+      <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description"></nz-card-meta>
     </nz-card>
-    <button nz-button style="margin-top: 16px;" (click)="toggleLoading()">Toggle loading</button>
+    <nz-card
+      style="width: 300px;margin-top: 16px"
+      [nzActions]="[actionSetting,actionEdit,actionEllipsis]">
+      <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzAvatar]="{size: 'large'}">
+        <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description"></nz-card-meta>
+      </nz-skeleton>
+    </nz-card>
+    <ng-template #avatarTemplate>
+      <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
+    </ng-template>
+    <ng-template #actionSetting>
+      <i class="anticon anticon-setting"></i>
+    </ng-template>
+    <ng-template #actionEdit>
+      <i class="anticon anticon-edit"></i>
+    </ng-template>
+    <ng-template #actionEllipsis>
+      <i class="anticon anticon-ellipsis"></i>
+    </ng-template>
   `
 })
 export class NzDemoCardLoadingComponent {
   loading = true;
-  toggleLoading(): void {
-    this.loading = !this.loading;
-  }
 }

components/components.less

@@ -33,6 +33,7 @@
 @import "./radio/style/index.less";
 @import "./rate/style/index.less";
 @import "./select/style/index.less";
+@import "./skeleton/style/index.less";
 @import "./slider/style/index.less";
 @import "./spin/style/index.less";
 @import "./steps/style/index.less";

components/list/demo/loadmore.ts

@@ -3,36 +3,38 @@ import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { NzMessageService } from 'ng-zorro-antd';
 
+const count = 5;
 const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
 
 @Component({
   selector: 'nz-demo-list-loadmore',
   template: `
   <nz-list
     class="demo-loadmore-list"
-    [nzDataSource]="data"
+    [nzDataSource]="list"
     [nzItemLayout]="'horizontal'"
-    [nzLoading]="loading"
+    [nzLoading]="initLoading"
     [nzRenderItem]="item"
     [nzLoadMore]="loadMore">
     <ng-template #item let-item>
-      <nz-list-item [nzContent]="'content'" [nzActions]="[editAction,moreAction]">
-        <ng-template #editAction><a (click)="edit(item)">edit</a></ng-template>
-        <ng-template #moreAction><a (click)="edit(item)">more</a></ng-template>
-        <nz-list-item-meta
+      <nz-list-item [nzContent]="item.loading?'':'content'" [nzActions]="item.loading?[]:[editAction,moreAction]">
+        <nz-skeleton [nzAvatar]="true" [nzActive]="true" [nzTitle]="false" [nzLoading]="item.loading">
+          <ng-template #editAction><a (click)="edit(item)">edit</a></ng-template>
+          <ng-template #moreAction><a (click)="edit(item)">more</a></ng-template>
+          <nz-list-item-meta
             [nzTitle]="nzTitle"
             nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
             nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team">
             <ng-template #nzTitle>
-                <a href="https://ng.ant.design">{{item.name.last}}</a>
+              <a href="https://ng.ant.design">{{item.name.last}}</a>
             </ng-template>
-        </nz-list-item-meta>
+          </nz-list-item-meta>
+        </nz-skeleton>
       </nz-list-item>
     </ng-template>
     <ng-template #loadMore>
-      <div *ngIf="showLoadingMore" class="loadmore">
+      <div class="loadmore">
         <button nz-button *ngIf="!loadingMore" (click)="onLoadMore()">loading more</button>
-        <nz-spin *ngIf="loadingMore" [nzSpinning]="loadingMore"></nz-spin>
       </div>
     </ng-template>
   </nz-list>
@@ -50,33 +52,36 @@ const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,
   ` ]
 })
 export class NzDemoListLoadmoreComponent implements OnInit {
-  loading = true; // bug
+  initLoading = true; // bug
   loadingMore = false;
-  showLoadingMore = true;
   data = [];
+  list = [];
 
   constructor(private http: HttpClient, private msg: NzMessageService) {}
 
   ngOnInit(): void {
-      this.getData((res: any) => {
-        this.data = res.results;
-        this.loading = false;
-      });
+    this.getData((res: any) => {
+      this.data = res.results;
+      this.list = res.results;
+      this.initLoading = false;
+    });
   }
 
   getData(callback: (res: any) => void): void {
-      this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
+    this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
   }
 
   onLoadMore(): void {
     this.loadingMore = true;
+    this.list = this.data.concat([...Array(count)].fill({}).map(() => ({ loading: true, name: {} })));
     this.http.get(fakeDataUrl).subscribe((res: any) => {
       this.data = this.data.concat(res.results);
+      this.list = [...this.data];
       this.loadingMore = false;
     });
   }
 
   edit(item: any): void {
-      this.msg.success(item.email);
+    this.msg.success(item.email);
   }
 }

components/ng-zorro-antd.module.ts

@@ -37,6 +37,7 @@ import { NzProgressModule } from './progress/nz-progress.module';
 import { NzRadioModule } from './radio/nz-radio.module';
 import { NzRateModule } from './rate/nz-rate.module';
 import { NzSelectModule } from './select/nz-select.module';
+import { NzSkeletonModule } from './skeleton/nz-skeleton.module';
 import { NzSliderModule } from './slider/nz-slider.module';
 import { NzSpinModule } from './spin/nz-spin.module';
 import { NzStepsModule } from './steps/nz-steps.module';
@@ -96,6 +97,7 @@ export * from './auto-complete';
 export * from './message';
 export * from './time-picker';
 export * from './tooltip';
+export * from './skeleton';
 export * from './slider';
 export * from './popover';
 export * from './notification';
@@ -163,7 +165,8 @@ export * from './core/wave';
     NzTreeModule,
     NzTreeSelectModule,
     NzTimePickerModule,
-    NzWaveModule
+    NzWaveModule,
+    NzSkeletonModule
   ]
 })
 export class NgZorroAntdModule {

components/skeleton/demo/active.md

@@ -0,0 +1,13 @@
+---
+order: 2
+title:
+  zh-CN: 动画效果
+  en-US: Active Animation
+---
+ ## zh-CN
+
+ 显示动画效果。
+
+ ## en-US
+
+ Display active animation.

components/skeleton/demo/active.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-skeleton-active',
+  template: `
+    <nz-skeleton [nzActive]="true"></nz-skeleton>
+  `
+})
+export class NzDemoSkeletonActiveComponent { }

components/skeleton/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Basic usage.

components/skeleton/demo/basic.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-skeleton-basic',
+  template: `
+    <nz-skeleton></nz-skeleton>
+  `
+})
+export class NzDemoSkeletonBasicComponent { }

components/skeleton/demo/children.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 包含子组件
+  en-US: Contains sub component
+---
+
+ ## zh-CN
+
+ 加载占位图包含子组件。
+
+ ## en-US
+
+ Skeleton contains sub component.

components/skeleton/demo/children.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-skeleton-children',
+  template: `
+    <div class="article">
+      <nz-skeleton [nzLoading]="loading">
+        <h4>Ant Design, a design language</h4>
+        <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+      </nz-skeleton>
+      <button nz-button (click)="showSkeleton()" [disabled]="loading">
+        Show Skeleton
+      </button>
+    </div>
+  `,
+  styles  : [
+    `
+      .article h4 {
+        margin-bottom: 16px;
+      }
+      .article button {
+        margin-top: 16px;
+      }
+    `
+  ]
+})
+export class NzDemoSkeletonChildrenComponent {
+  loading = false;
+
+  showSkeleton(): void {
+    this.loading = true;
+    setTimeout(() => {
+      this.loading = false;
+    }, 3000);
+  }
+}

components/skeleton/demo/complex.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 复杂的组合
+  en-US: Complex combination
+---
+
+## zh-CN
+
+更复杂的组合。
+
+## en-US
+
+Complex combination with avatar and multiple paragraphs.

components/skeleton/demo/complex.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-skeleton-complex',
+  template: `
+    <nz-skeleton [nzAvatar]="true" [nzParagraph]="{ rows: 4 }"></nz-skeleton>
+  `
+})
+export class NzDemoSkeletonComplexComponent { }

components/skeleton/demo/list.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 列表样例
+  en-US: List Sample
+---
+
+## zh-CN
+
+在列表组件中使用加载占位符。
+
+## en-US
+
+Use skeleton in list component.

components/skeleton/demo/list.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-skeleton-list',
+  template: `
+    <nz-switch [(ngModel)]="loading"></nz-switch>
+    <nz-list [nzDataSource]="listData" [nzRenderItem]="item" [nzItemLayout]="'vertical'">
+      <ng-template #item let-item>
+        <nz-list-item [nzContent]="loading?' ':item.content" [nzActions]="loading?[]:[starAction,likeAction,msgAction]" [nzExtra]="loading?'':extra">
+          <nz-skeleton [nzLoading]="loading" [nzActive]="true" [nzAvatar]="true">
+            <ng-template #starAction><i class="anticon anticon-star-o" style="margin-right: 8px;"></i> 156</ng-template>
+            <ng-template #likeAction><i class="anticon anticon-like-o" style="margin-right: 8px;"></i> 156</ng-template>
+            <ng-template #msgAction><i class="anticon anticon-message" style="margin-right: 8px;"></i> 2</ng-template>
+            <nz-list-item-meta
+              [nzAvatar]="item.avatar"
+              [nzTitle]="nzTitle"
+              [nzDescription]="item.description">
+              <ng-template #nzTitle><a href="{{item.href}}">{{item.title}}</a></ng-template>
+            </nz-list-item-meta>
+            <ng-template #extra>
+              <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png">
+            </ng-template>
+          </nz-skeleton>
+        </nz-list-item>
+      </ng-template>
+    </nz-list>
+  `
+})
+export class NzDemoSkeletonListComponent {
+  loading = true;
+  listData = new Array(3).fill({}).map((i, index) => {
+    return {
+      href: 'http://ng.ant.design',
+      title: `ant design part ${index}`,
+      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+      content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
+    };
+  });
+}