Merge branch 'spinDebounce' of https://github.com/RaoHai/ant-design into RaoHai-spinDebounce

components/spin/demo/nested.md

@@ -27,7 +27,7 @@ const Card = React.createClass({
     );
     return (
       <div>
-        <Spin spinning={this.state.loading}>{container}</Spin>
+        <Spin spining={this.state.loading}>{container}</Spin>
         切换加载状态：<Switch checked={this.state.loading} onChange={this.toggle} />
       </div>
     );

components/spin/index.jsx

@@ -10,6 +10,13 @@ export default class Spin extends React.Component {
     spinning: true,
   }
 
+  constructor(props) {
+    super(props);
+    const spinning = this.getSpinning(props);
+    this.state = {
+      spinning,
+    };
+  }
   static propTypes = {
     className: React.PropTypes.string,
     size: React.PropTypes.oneOf(['small', 'default', 'large']),
@@ -26,10 +33,29 @@ export default class Spin extends React.Component {
       findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`;
     }
   }
-
+  getSpinning(props) {
+    warning(!('spining' in this.props), '`spining` property of Popover is a spell mistake, use `spinning` instead.');
+    const { spinning, spining } = props;
+    // Backwards support
+    if (spining !== undefined) {
+      return spining;
+    }
+    return spinning;
+  }
+  componentWillReceiveProps(nextProps) {
+    const spinning = this.getSpinning(nextProps);
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
+    }
+    if (spinning) {
+      this.debounceTimeout = setTimeout(() => this.setState({ spinning }), 500);
+    } else {
+      this.setState({ spinning });
+    }
+  }
   render() {
-    const { className, size, prefixCls, tip, spining = true } = this.props;
+    const { className, size, prefixCls, tip } = this.props;
-    const spinning = this.props.spinning && spining;  // Backwards support
+    const { spinning } = this.state;
 
     const spinClassName = classNames({
       [prefixCls]: true,