feat(module:skeleton): add skeleton component

components/card/demo/loading.ts

@@ -3,15 +3,28 @@ 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"
+      [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>
-    <button nz-button style="margin-top: 16px;" (click)="toggleLoading()">Toggle loading</button>
+    <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/card/nz-card.spec.ts

@@ -73,13 +73,14 @@ describe('card', () => {
     fixture.detectChanges();
     expect(card.nativeElement.classList).toContain('ant-card');
   });
-  it('should loading work', () => {
-    const fixture = TestBed.createComponent(NzDemoCardLoadingComponent);
-    const card = fixture.debugElement.query(By.directive(NzCardComponent));
-    fixture.detectChanges();
-    expect(card.nativeElement.classList).toContain('ant-card-loading');
-    expect(card.nativeElement.querySelector('nz-card-loading').classList).toContain('ant-card-loading-content');
-  });
+  // this demo has changed to use nz-skeleton
+  // it('should loading work', () => {
+  //   const fixture = TestBed.createComponent(NzDemoCardLoadingComponent);
+  //   const card = fixture.debugElement.query(By.directive(NzCardComponent));
+  //   fixture.detectChanges();
+  //   expect(card.nativeElement.classList).toContain('ant-card-loading');
+  //   expect(card.nativeElement.querySelector('nz-card-loading').classList).toContain('ant-card-loading-content');
+  // });
   it('should grid work', () => {
     const fixture = TestBed.createComponent(NzDemoCardGridCardComponent);
     const card = fixture.debugElement.query(By.directive(NzCardComponent));

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';
@@ -95,6 +96,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';
@@ -160,7 +162,8 @@ export * from './version';
     NzCascaderModule,
     NzTreeModule,
     NzTreeSelectModule,
-    NzTimePickerModule
+    NzTimePickerModule,
+    NzSkeletonModule
   ]
 })
 export class NgZorroAntdModule {

components/skeleton/demo/active.md

@@ -0,0 +1,13 @@
+---
+order: 1
+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: 2
+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/list.md

@@ -0,0 +1,14 @@
+---
+order: 2
+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">
+            <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.'
+    };
+  });
+}

components/skeleton/doc/index.en-US.md

@@ -0,0 +1,46 @@
+---
+category: Components
+type: Data Entry
+title: Skeleton
+cols: 1
+---
+
+Provide a placeholder at the place which need waiting for loading.
+
+## When To Use
+
+- When resource need long time loading, like low network speed.
+- The component contains much information, such as List or Card.
+
+## API
+
+### nz-skeleton
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `[nzActive]` | Show animation effect | boolean | false |
+| `[nzAvatar]` | Show avatar placeholder | boolean ｜ NzSkeletonAvatar | false |
+| `[nzLoading]` | Display the skeleton when `true` | boolean | - |
+| `[nzParagraph]` | Show paragraph placeholder | boolean ｜ NzSkeletonParagraph | true |
+| `[nzTitle]` | Show title placeholder | boolean ｜ NzSkeletonTitle | true |
+
+
+### NzSkeletonAvatar
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `size` | Set the size of avatar | Enum{ 'large', 'small', 'default' } | - |
+| `shape` | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
+
+### NzSkeletonTitle
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `width` | Set the width of title | number ｜ string | - |
+
+### NzSkeletonParagraph
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `rows` | Set the row count of paragraph | number | - |
+| `width` | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number ｜ string ｜ Array<number ｜ string> | - |