add delay props of Spin (#4424)

*  add `delay` props of Spin

 + close 4306
 + Specifies a delay for loading state. If `spinning` ends during delay, loading state won't appear.

* improves

components/spin/demo/delayAndDebounce.md

@@ -0,0 +1,56 @@
+---
+order: 5
+title:
+  zh-CN: 延迟
+  en-US: delay
+---
+
+## zh-CN
+
+延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
+
+## en-US
+
+Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
+
+````jsx
+import { Spin, Alert, Switch } from 'antd';
+
+const Card = React.createClass({
+  getInitialState() {
+    return { loading: false };
+  },
+  toggle(value) {
+    this.setState({ loading: value });
+  },
+  render() {
+    const container = (
+      <Alert message="Alert message title"
+        description="Further details about the context of this alert."
+        type="info"
+      />
+    );
+    return (
+      <div>
+        <Spin spinning={this.state.loading} delay={500} >{container}</Spin>
+        Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <Card />
+, mountNode);
+````
+
+````css
+.example {
+  text-align: center;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  margin-bottom: 20px;
+  padding: 30px 50px;
+  margin: 20px 0;
+}
+````

components/spin/index.en-US.md

@@ -19,3 +19,4 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 | size       | enum           | default     | Size of dot in spin component, available in `small`, `default` and `large`. |
 | spinning   | boolean        | true        | Use in embedded mode, to modify loading state. |
 | tip    | string        | None        | Customize description content  |
+| delay | number (milliseconds) | None | Specifies a delay for loading state |

components/spin/index.tsx

@@ -12,6 +12,7 @@ export interface SpinProps {
   spinning?: boolean;
   size?: 'small' | 'default' | 'large';
   tip?: string;
+  delay?: number;
 }
 
 export default class Spin extends React.Component<SpinProps, any> {
@@ -29,6 +30,7 @@ export default class Spin extends React.Component<SpinProps, any> {
   };
 
   debounceTimeout: number;
+  delayTimeout: number;
 
   constructor(props) {
     super(props);
@@ -53,20 +55,32 @@ export default class Spin extends React.Component<SpinProps, any> {
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);
     }
+    if (this.delayTimeout) {
+      clearTimeout(this.delayTimeout);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
     const currentSpinning = this.props.spinning;
     const spinning = nextProps.spinning;
+    const { delay } = this.props;
+
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);
     }
     if (currentSpinning && !spinning) {
       this.debounceTimeout = setTimeout(() => this.setState({ spinning }), 300);
+      if (this.delayTimeout) {
+        clearTimeout(this.delayTimeout);
+      }
+    } else {
+      if (spinning && delay && !isNaN(Number(delay))) {
+        this.delayTimeout = setTimeout(() => this.setState({ spinning }), delay);
       } else {
         this.setState({ spinning });
       }
     }
+  }
   render() {
     const { className, size, prefixCls, tip, ...restProps } = this.props;
     const { spinning } = this.state;
@@ -81,6 +95,7 @@ export default class Spin extends React.Component<SpinProps, any> {
     // fix https://fb.me/react-unknown-prop
     const divProps = omit(restProps, [
       'spinning',
+      'delay',
     ]);
 
     const spinElement = (

components/spin/index.zh-CN.md

@@ -20,3 +20,4 @@ subtitle: 加载中
 | size       | enum           | default     | spin组件中点的大小，可选值为 small default large |
 | spinning   | boolean        | true        | 用于内嵌其他组件的模式，可以关闭 loading 效果    |
 | tip    | string        | 无        | 自定义描述文案 |
+| delay | number (毫秒) | 无 | 延迟显示 loading 效果 |