feat(module:skeleton):add skeleton component #1829

wenqi73 · 2018-07-15T02:15:57Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #1808

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

codecov · 2018-07-15T02:57:17Z

Codecov Report

Merging #1829 into master will increase coverage by <.01%.
The diff coverage is 98.55%.

@@            Coverage Diff             @@
##           master    #1829      +/-   ##
==========================================
+ Coverage      96%   96.01%   +<.01%     
==========================================
  Files         477      479       +2     
  Lines       11618    11685      +67     
  Branches     1550     1561      +11     
==========================================
+ Hits        11154    11219      +65     
  Misses        132      132              
- Partials      332      334       +2

Impacted Files	Coverage Δ
components/card/demo/loading.ts	`100% <ø> (+16.66%)`	⬆️
components/skeleton/nz-skeleton.module.ts	`100% <100%> (ø)`
components/skeleton/nz-skeleton.component.ts	`98.46% <98.46%> (ø)`
components/tabs/nz-tabset.component.ts	`95.72% <0%> (-0.86%)`	⬇️
components/table/nz-table.component.ts	`95.34% <0%> (-0.59%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6ef1185...c201b4b. Read the comment docs.

wzhudev · 2018-07-16T03:05:54Z

components/skeleton/nz-skeleton.component.html

+    </span>
+  </div>
+  <div class="ant-skeleton-content">
+    <h3 *ngIf="!!nzTitle" class="ant-skeleton-title" [style.width]="toCSSUnit(_title.width)"></h3>


It's not a good idea to access a private variable in template files. It may cause errors in --aot compiling.

wzhudev · 2018-07-16T03:06:23Z

components/skeleton/nz-skeleton.component.ts

+    return {};
+  }
+
+  toCSSUnit(value: number | string = ''): number | string  {


It seems that this function would not return a number.

wzhudev · 2018-07-16T03:10:56Z

components/skeleton/doc/index.zh-CN.md

+
+- 网络较慢，需要长时间等待加载处理的情况下
+- 图文信息内容较多的列表/卡片中
+


Could you please add the other demo? See: https://deploy-preview-11226--ant-design.netlify.com/components/skeleton-cn/.

It would be good if we sync to ant design react.

thx, I just sent a commit

wzhudev · 2018-07-16T11:50:13Z

@wenqi73 Thanks for you contribution. Hopefully we would commit these to master branch this weekend.

wenqi73 · 2018-08-23T07:07:48Z

@wendzhue Please review again.

wzhudev

Your code is of good quality with minor changes requested. We would merge this after Ant Design officially releases this component and make some changes accordingly.

wzhudev · 2018-08-23T08:17:22Z

components/skeleton/nz-skeleton.component.ts

+  }
+
+  updateProps(): void {
+    this.title = {


I know you're trying to cover default props with user's customized props. But these ... operators seems verbose to me. Could you figure out a simpler and direct way to prepare these parameters?

wzhudev · 2018-08-23T08:19:35Z

components/skeleton/nz-skeleton.component.ts

+  @Input() nzAvatar: NzSkeletonAvatar | boolean = false;
+  @Input() nzParagraph: NzSkeletonParagraph | boolean = true;
+
+  getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): NzSkeletonTitle {


You don't need to expose these get* methods as public.

There are some other methods should be set as private too.

You'd better write them into updateProps since they're only used there, to improve code clarity. And in that way you don't have to pass these parameters all over the place.

wzhudev · 2018-08-23T08:26:54Z

components/skeleton/nz-skeleton.component.ts

+  }
+
+  getAvatarBasicProps(hasTitle: boolean, hasParagraph: boolean): NzSkeletonAvatar {
+    if (hasTitle && !hasParagraph) {


Use ?: operator for code readability. Like:

const shape = hasTitle && !hasParagraph ? 'square' : 'circle'; return { shape };

wzhudev · 2018-08-23T08:36:05Z

components/skeleton/nz-skeleton.component.ts

+  toCSSUnit(value: number | string = ''): string {
+    if (typeof value === 'number') {
+      return `${value}px`;
+    } else if (typeof value === 'string') {


typeof '' returns "string". It's not reliable though it works because when width is not truthy, the line goes 100% wide as a block element.

I revert this because the width is controlled by less:
https://github.com/ant-design/ant-design/blob/02af08951ad4b0a461fc282382f3c12dd5b6d7d1/components/skeleton/style/index.less#L63-L65
width = '' will not affect default width, maybe there is a better solution.

wzhudev · 2018-08-23T08:42:03Z

components/skeleton/nz-skeleton.component.ts

+      widthList = width;
+    } else if (width && !Array.isArray(width)) {
+      widthList = [];
+      widthList[rows - 1] = width;


I know it would work silently in situations like [undefined, undefined, 80] and make the first two lines' width property not set. But worrisome...

No need to change perhaps.

wzhudev · 2018-08-23T08:59:36Z

@wenqi73 And there's an avatar skeleton demo in card component page. Please add it. See https://deploy-preview-11226--ant-design.netlify.com/components/card-cn/#components-card-demo-loading.

Besides, please change your first commit message to feat(module:skeleton): add skeleton component once you're all done.

wenqi73 · 2018-08-26T11:34:00Z

@wendzhue Another question: card loading demo has changed to skeleton, I think the test is useless so I commented it. please check again and I will change the commit message later.

wzhudev · 2018-09-05T07:16:31Z

@wenqi73 Ant Design had released this component and added a new demo. See https://ant.design/components/skeleton-cn/#components-skeleton-demo-complex. Please add it.

wzhudev · 2018-09-05T07:17:37Z

And please rebase your commit to tag 1.4.1. Since it was checked out some versions ago.

wzhudev · 2018-09-05T07:21:38Z

And nz-card's demo should not be removed (neither its test). In fact it should support two ways of usage at the same time. See https://ant.design/components/card-cn/#components-card-demo-loading.

wenqi73 · 2018-09-08T05:24:58Z

@wendzhue demo has added, please check.

wzhudev · 2018-09-08T13:36:12Z

LGTM. @simplejason If possible, this could be released this weekend.

* feat(module:skeleton): add skeleton component * fix(component:skeleton):sync demo to antd

wenqi73 force-pushed the fea-skeleton branch from 00877cf to b2734ec Compare July 15, 2018 02:57

wenqi73 force-pushed the fea-skeleton branch from b2734ec to 3a4d02c Compare July 15, 2018 03:26

hsuanxyz requested a review from wzhudev July 16, 2018 02:45

wzhudev requested changes Jul 16, 2018

View reviewed changes

wenqi73 force-pushed the fea-skeleton branch from 2070fe2 to 622f9b8 Compare July 16, 2018 09:26

wzhudev approved these changes Jul 16, 2018

View reviewed changes

wenqi73 force-pushed the fea-skeleton branch 2 times, most recently from 9ecea6e to d43346e Compare July 19, 2018 13:02

wenqi73 changed the title ~~feat(module:skeleton):add skeleton component~~ WIP(module:skeleton):add skeleton component Jul 23, 2018

wenqi73 force-pushed the fea-skeleton branch 3 times, most recently from 39e6d3b to e535dd0 Compare August 3, 2018 17:46

wzhudev assigned wenqi73 Aug 18, 2018

wzhudev added the PR: Need ClearUp label Aug 18, 2018

wenqi73 force-pushed the fea-skeleton branch from e535dd0 to d2c0eec Compare August 23, 2018 06:25

wzhudev requested changes Aug 23, 2018

View reviewed changes

wenqi73 force-pushed the fea-skeleton branch from 8f624e3 to 24d3320 Compare August 26, 2018 11:26

wenqi73 force-pushed the fea-skeleton branch from 24d3320 to d1754ac Compare August 26, 2018 11:46

wenqi73 changed the title ~~WIP(module:skeleton):add skeleton component~~ feat(module:skeleton):add skeleton component Aug 26, 2018

wzhudev approved these changes Aug 27, 2018

View reviewed changes

wzhudev removed the PR: Need ClearUp label Aug 27, 2018

wzhudev added the PR: Need ClearUp label Sep 5, 2018

wzhudev added the PR:Need Change label Sep 5, 2018

wenqi73 added 2 commits September 7, 2018 22:11

feat(module:skeleton): add skeleton component

0c8c784

fix(component:skeleton):sync demo to antd

c201b4b

wenqi73 force-pushed the fea-skeleton branch from 2bcc679 to c201b4b Compare September 8, 2018 05:07

wzhudev removed PR: Need ClearUp labels Sep 9, 2018

vthinkxie merged commit fd34f8b into NG-ZORRO:master Sep 17, 2018

wenqi73 deleted the fea-skeleton branch September 28, 2018 05:49

hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this pull request Aug 5, 2020

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

2d05fd4

* feat(module:skeleton): add skeleton component * fix(component:skeleton):sync demo to antd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(module:skeleton):add skeleton component #1829

feat(module:skeleton):add skeleton component #1829

wenqi73 commented Jul 15, 2018

codecov bot commented Jul 15, 2018 •

edited

Loading

wzhudev Jul 16, 2018

wzhudev Jul 16, 2018

wzhudev Jul 16, 2018

wenqi73 Jul 16, 2018

wzhudev commented Jul 16, 2018

wenqi73 commented Aug 23, 2018

wzhudev left a comment •

edited

Loading

wzhudev Aug 23, 2018

wzhudev Aug 23, 2018 •

edited

Loading

wzhudev Aug 23, 2018 •

edited

Loading

wzhudev Aug 23, 2018 •

edited

Loading

wenqi73 Sep 8, 2018

wzhudev Aug 23, 2018 •

edited

Loading

wzhudev commented Aug 23, 2018

wenqi73 commented Aug 26, 2018

wzhudev commented Sep 5, 2018

wzhudev commented Sep 5, 2018 •

edited

Loading

wzhudev commented Sep 5, 2018

wenqi73 commented Sep 8, 2018

wzhudev commented Sep 8, 2018


		- 网络较慢，需要长时间等待加载处理的情况下
		- 图文信息内容较多的列表/卡片中

feat(module:skeleton):add skeleton component #1829

feat(module:skeleton):add skeleton component #1829

Conversation

wenqi73 commented Jul 15, 2018

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

codecov bot commented Jul 15, 2018 • edited Loading

Codecov Report

wzhudev Jul 16, 2018

Choose a reason for hiding this comment

wzhudev Jul 16, 2018

Choose a reason for hiding this comment

wzhudev Jul 16, 2018

Choose a reason for hiding this comment

wenqi73 Jul 16, 2018

Choose a reason for hiding this comment

wzhudev commented Jul 16, 2018

wenqi73 commented Aug 23, 2018

wzhudev left a comment • edited Loading

Choose a reason for hiding this comment

wzhudev Aug 23, 2018

Choose a reason for hiding this comment

wzhudev Aug 23, 2018 • edited Loading

Choose a reason for hiding this comment

wzhudev Aug 23, 2018 • edited Loading

Choose a reason for hiding this comment

wzhudev Aug 23, 2018 • edited Loading

Choose a reason for hiding this comment

wenqi73 Sep 8, 2018

Choose a reason for hiding this comment

wzhudev Aug 23, 2018 • edited Loading

Choose a reason for hiding this comment

wzhudev commented Aug 23, 2018

wenqi73 commented Aug 26, 2018

wzhudev commented Sep 5, 2018

wzhudev commented Sep 5, 2018 • edited Loading

wzhudev commented Sep 5, 2018

wenqi73 commented Sep 8, 2018

wzhudev commented Sep 8, 2018

codecov bot commented Jul 15, 2018 •

edited

Loading

wzhudev left a comment •

edited

Loading

wzhudev Aug 23, 2018 •

edited

Loading

wzhudev Aug 23, 2018 •

edited

Loading

wzhudev Aug 23, 2018 •

edited

Loading

wzhudev Aug 23, 2018 •

edited

Loading

wzhudev commented Sep 5, 2018 •

edited

Loading