⚡ Improve spin perfermance and UI detail

components/spin/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Animate from 'rc-animate';
 import omit from 'omit.js';
 
 export type SpinSize = 'small' | 'default' | 'large';
@@ -93,13 +92,6 @@ class Spin extends React.Component<SpinProps, SpinState> {
     return !!(this.props && this.props.children);
   }
 
-  componentDidMount() {
-    const { spinning, delay } = this.props;
-    if (shouldDelay(spinning, delay)) {
-      this.delayTimeout = window.setTimeout(this.delayUpdateSpinning, delay);
-    }
-  }
-
   componentWillUnmount() {
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);
@@ -169,27 +161,16 @@ class Spin extends React.Component<SpinProps, SpinState> {
       </div>
     );
     if (this.isNestedPattern()) {
-      let animateClassName = prefixCls + '-nested-loading';
-      if (wrapperClassName) {
-        animateClassName += ' ' + wrapperClassName;
-      }
-      const containerClassName = classNames({
-        [`${prefixCls}-container`]: true,
+      const containerClassName = classNames(`${prefixCls}-container`, {
         [`${prefixCls}-blur`]: spinning,
       });
       return (
-        <Animate
-          {...divProps}
-          component="div"
-          className={animateClassName}
-          style={null}
-          transitionName="fade"
-        >
+        <div {...divProps} className={classNames(`${prefixCls}-nested-loading`, wrapperClassName)}>
           {spinning && <div key="loading">{spinElement}</div>}
           <div className={containerClassName} key="container">
             {this.props.children}
           </div>
-        </Animate>
+        </div>
       );
     }
     return spinElement;

components/spin/style/index.less

@@ -26,7 +26,7 @@
       display: block;
       position: absolute;
       height: 100%;
-      max-height: 360px;
+      max-height: 400px;
       width: 100%;
       z-index: 4;
       .@{spin-prefix-cls}-dot {
@@ -75,19 +75,6 @@
   &-container {
     position: relative;
     transition: opacity 0.3s;
-    .clearfix;
-  }
-
-  &-blur {
-    pointer-events: none;
-    user-select: none;
-    overflow: hidden;
-    opacity: 0.5;
-    -webkit-filter: blur(0.5px);
-    filter: blur(0.5px);
-
-    /* autoprefixer: off */
-    filter: ~'progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)';
 
     &:after {
       content: '';
@@ -97,12 +84,27 @@
       top: 0;
       bottom: 0;
       background: #fff;
-      opacity: 0.3;
+      opacity: 0;
+      pointer-events: none;
       transition: all 0.3s;
+      height: 100%;
+      width: 100%;
       z-index: 10;
     }
   }
 
+  &-blur {
+    pointer-events: none;
+    user-select: none;
+    overflow: hidden;
+    opacity: 0.5;
+
+    &:after {
+      opacity: 0.4;
+      pointer-events: auto;
+    }
+  }
+
   // tip
   // ------------------------------
   &-tip {