From 11304d624480134971c5b728c2c5a6a2df048135 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=A7=E8=A1=A1?= <yadong.xyd@alibaba-inc.com>
Date: Sun, 25 Nov 2018 20:00:44 +0800
Subject: [PATCH] refactor(module:spin): refactor spin

---
 components/spin/nz-spin.component.html | 21 ++++++--------
 components/spin/nz-spin.component.ts   | 39 ++++++++------------------
 2 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/components/spin/nz-spin.component.html b/components/spin/nz-spin.component.html
index 98eeb9f9c53..bbe4df75525 100644
--- a/components/spin/nz-spin.component.html
+++ b/components/spin/nz-spin.component.html
@@ -1,26 +1,23 @@
 <ng-template #defaultIndicatorTemplate>
-  <span
-    class="ant-spin-dot"
-    [class.ant-spin-dot-spin]="(resultSpinning$|async) === true">
+  <span class="ant-spin-dot"
+    [class.ant-spin-dot-spin]="(debounceSpinning$ | async) === true">
     <i></i><i></i><i></i><i></i>
   </span>
 </ng-template>
 <div #nestedElement>
-  <div [hidden]="!((resultSpinning$|async) === true)">
-    <div
-      class="ant-spin"
-      [class.ant-spin-spinning]="(resultSpinning$|async) === true"
-      [class.ant-spin-lg]="nzSize=='large'"
-      [class.ant-spin-sm]="nzSize=='small'"
+  <div [hidden]="!((debounceSpinning$ | async) === true)">
+    <div class="ant-spin"
+      [class.ant-spin-spinning]="(debounceSpinning$ | async) === true"
+      [class.ant-spin-lg]="nzSize === 'large'"
+      [class.ant-spin-sm]="nzSize === 'small'"
       [class.ant-spin-show-text]="nzTip">
       <ng-template [ngTemplateOutlet]="nzIndicator || defaultIndicatorTemplate"></ng-template>
       <div class="ant-spin-text" *ngIf="nzTip">{{ nzTip }}</div>
     </div>
   </div>
-  <div
-    #containerElement
+  <div #containerElement
     class="ant-spin-container"
-    [class.ant-spin-blur]="(resultSpinning$|async) === true"
+    [class.ant-spin-blur]="(debounceSpinning$ | async) === true"
     (cdkObserveContent)="checkNested()">
     <ng-content></ng-content>
   </div>
diff --git a/components/spin/nz-spin.component.ts b/components/spin/nz-spin.component.ts
index e76594ec0b9..08670f4de54 100644
--- a/components/spin/nz-spin.component.ts
+++ b/components/spin/nz-spin.component.ts
@@ -4,10 +4,10 @@ import {
   Component,
   ElementRef,
   Input,
-  NgZone,
   Renderer2,
   TemplateRef,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -18,64 +18,49 @@ import { toBoolean } from '../core/util/convert';
 @Component({
   selector           : 'nz-spin',
   preserveWhitespaces: false,
+  encapsulation      : ViewEncapsulation.None,
   changeDetection    : ChangeDetectionStrategy.OnPush,
   templateUrl        : './nz-spin.component.html'
 })
 export class NzSpinComponent implements AfterViewInit {
-  private _tip: string;
-  private _delay = 0;
-  el: HTMLElement = this.elementRef.nativeElement;
-
-  baseSpinning$ = new BehaviorSubject(true);
-  resultSpinning$: Observable<boolean> = this.baseSpinning$.asObservable().pipe(debounceTime(this.nzDelay));
+  spinning$ = new BehaviorSubject(true);
+  debounceSpinning$: Observable<boolean> = this.spinning$.asObservable().pipe(debounceTime(0));
   @ViewChild('containerElement') containerElement: ElementRef;
   @ViewChild('nestedElement') nestedElement: ElementRef;
   @Input() nzIndicator: TemplateRef<void>;
   @Input() nzSize = 'default';
+  @Input() nzTip: string;
 
   @Input()
   set nzDelay(value: number) {
     if (isNotNil(value)) {
-      this._delay = value;
-      this.resultSpinning$ = this.baseSpinning$.asObservable().pipe(debounceTime(this.nzDelay));
+      this.debounceSpinning$ = this.spinning$.asObservable().pipe(debounceTime(value));
     }
   }
 
-  get nzDelay(): number {
-    return this._delay;
-  }
-
-  @Input()
-  set nzTip(value: string) {
-    this._tip = value;
-  }
-
-  get nzTip(): string {
-    return this._tip;
-  }
-
   @Input()
   set nzSpinning(value: boolean) {
-    this.baseSpinning$.next(toBoolean(value));
+    this.spinning$.next(toBoolean(value));
   }
 
   checkNested(): void {
+    const el: HTMLElement = this.elementRef.nativeElement;
     const containerElement = this.containerElement.nativeElement;
     const nestedElement = this.nestedElement.nativeElement;
     /** no way to detect empty https://github.com/angular/angular/issues/12530 **/
     /** https://github.com/angular/material2/issues/11280 **/
     if (!isEmpty(containerElement)) {
       this.renderer.removeStyle(containerElement, 'display');
-      this.renderer.setStyle(this.el, 'display', 'block');
+      this.renderer.setStyle(el, 'display', 'block');
       this.renderer.addClass(nestedElement, 'ant-spin-nested-loading');
     } else {
       this.renderer.setStyle(containerElement, 'display', 'none');
-      this.renderer.removeStyle(this.el, 'display');
+      this.renderer.removeStyle(el, 'display');
       this.renderer.removeClass(nestedElement, 'ant-spin-nested-loading');
     }
   }
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2, private zone: NgZone) {
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
   }
 
   ngAfterViewInit(): void {