🐛 Fix spin[delay] never render

also simplify the code of spin, a lot

close #14100

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) {
+    const updateSpinning: any = this.updateSpinning;
-      clearTimeout(this.debounceTimeout);
+    if (updateSpinning && updateSpinning.cancel) {
-    }
+      updateSpinning.cancel();
-    if (this.delayTimeout) {
-      clearTimeout(this.delayTimeout);
     }
   }
 
-  componentDidUpdate() {
+  componentDidMount() {
-    const currentSpinning = this.state.spinning;
+    this.updateSpinning();
-    const spinning = this.props.spinning;
+  }
-    if (currentSpinning === spinning) {
-      return;
-    }
-    const { delay } = this.props;
 
-    if (this.debounceTimeout) {
+  componentDidUpdate() {
-      clearTimeout(this.debounceTimeout);
+    this.updateSpinning();
-    }
-    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 });
-      }
-    }
   }
 
-  delayUpdateSpinning = () => {
+  updateSpinning = () => {
     const { spinning } = this.props;
-    if (this.state.spinning !== spinning) {
+    const { spinning: currentSpinning } = this.state;
+    if (currentSpinning !== spinning) {
       this.setState({ spinning });
     }
   };