From 8e26b6823a11aec0ba1582e0c4528bcd13538a6b Mon Sep 17 00:00:00 2001
From: bLue <tbdblue@gmail.com>
Date: Fri, 8 Jun 2018 23:13:47 +0800
Subject: [PATCH] Fix spin delay issue if mounts with spinning=true (#10727)

* Fix spin delay issue if mounts with spinning=true

* Add test for spin delay issue

* Update spin lifecycle method
---
 components/spin/__tests__/index.test.js | 7 +++++++
 components/spin/index.tsx               | 8 ++++++++
 2 files changed, 15 insertions(+)

diff --git a/components/spin/__tests__/index.test.js b/components/spin/__tests__/index.test.js
index 2094661be1..367f5ddd85 100644
--- a/components/spin/__tests__/index.test.js
+++ b/components/spin/__tests__/index.test.js
@@ -20,4 +20,11 @@ describe('Spin', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should render with delay when it\'s mounted with spinning=true and delay', () => {
+    const wrapper = shallow(
+      <Spin spinning delay={500} />
+    );
+    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
+  });
 });
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index c071cd23c7..0b3ccce14d 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -56,6 +56,14 @@ export default class Spin extends React.Component<SpinProps, SpinState> {
     return !!(this.props && this.props.children);
   }
 
+  componentDidMount() {
+    const { spinning, delay } = this.props;
+    if (spinning && delay && !isNaN(Number(delay))) {
+      this.setState({ spinning: false });
+      this.delayTimeout = window.setTimeout(() => this.setState({ spinning }), delay);
+    }
+  }
+
   componentWillUnmount() {
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);