From 9ecb3725a173a58bfa5c7ca2f7634d2650a98d10 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 4 Jan 2019 23:35:01 +0800
Subject: [PATCH] :bug: Fix spin[delay] never render

also simplify the code of spin, a lot

close #14100
---
 components/spin/demo/basic.md |  2 +-
 components/spin/index.tsx     | 53 +++++++++--------------------------
 2 files changed, 15 insertions(+), 40 deletions(-)

diff --git a/components/spin/demo/basic.md b/components/spin/demo/basic.md
index 1307aa00e2..e1c3e2d0b8 100644
--- a/components/spin/demo/basic.md
+++ b/components/spin/demo/basic.md
@@ -1,6 +1,6 @@
 ---
 order: 0
-title: 
+title:
   zh-CN: 基本用法
   en-US: basic Usage
 ---
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index 560d408254..9a100584fa 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import omit from 'omit.js';
+import debounce from 'lodash/debounce';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { tuple } from '../_util/type';
 
@@ -78,9 +79,6 @@ class Spin extends React.Component<SpinProps, SpinState> {
     defaultIndicator = indicator;
   }
 
-  debounceTimeout: number;
-  delayTimeout: number;
-
   constructor(props: SpinProps) {
     super(props);
 
@@ -88,56 +86,33 @@ class Spin extends React.Component<SpinProps, SpinState> {
     this.state = {
       spinning: spinning && !shouldDelay(spinning, delay),
     };
+
+    this.updateSpinning = debounce(this.updateSpinning, delay);
   }
 
   isNestedPattern() {
     return !!(this.props && this.props.children);
   }
 
-  componentDidMount() {
-    this.componentDidUpdate();
-  }
-
   componentWillUnmount() {
-    if (this.debounceTimeout) {
-      clearTimeout(this.debounceTimeout);
-    }
-    if (this.delayTimeout) {
-      clearTimeout(this.delayTimeout);
+    const updateSpinning: any = this.updateSpinning;
+    if (updateSpinning && updateSpinning.cancel) {
+      updateSpinning.cancel();
     }
   }
 
-  componentDidUpdate() {
-    const currentSpinning = this.state.spinning;
-    const spinning = this.props.spinning;
-    if (currentSpinning === spinning) {
-      return;
-    }
-    const { delay } = this.props;
+  componentDidMount() {
+    this.updateSpinning();
+  }
 
-    if (this.debounceTimeout) {
-      clearTimeout(this.debounceTimeout);
-    }
-    if (currentSpinning && !spinning) {
-      this.debounceTimeout = window.setTimeout(() => this.setState({ spinning }), 200);
-      if (this.delayTimeout) {
-        clearTimeout(this.delayTimeout);
-      }
-    } else {
-      if (shouldDelay(spinning, delay)) {
-        if (this.delayTimeout) {
-          clearTimeout(this.delayTimeout);
-        }
-        this.delayTimeout = window.setTimeout(this.delayUpdateSpinning, delay);
-      } else {
-        this.setState({ spinning });
-      }
-    }
+  componentDidUpdate() {
+    this.updateSpinning();
   }
 
-  delayUpdateSpinning = () => {
+  updateSpinning = () => {
     const { spinning } = this.props;
-    if (this.state.spinning !== spinning) {
+    const { spinning: currentSpinning } = this.state;
+    if (currentSpinning !== spinning) {
       this.setState({ spinning });
     }
   };