POC

common/components/NonceField.tsx

@@ -3,7 +3,7 @@ import { NonceFieldFactory } from 'components/NonceFieldFactory';
 import Help from 'components/ui/Help';
 import RefreshIcon from 'assets/images/refresh.svg';
 import './NonceField.scss';
-import { InlineSpinner } from 'components/ui/InlineSpinner';
+import { InlineSpinner, DelayLoader } from 'components/ui/InlineSpinner';
 import { connect } from 'react-redux';
 import { getNonceRequested, TGetNonceRequested } from 'actions/transaction';
 import { nonceRequestPending } from 'selectors/transaction';
@@ -26,6 +26,23 @@ type Props = OwnProps & DispatchProps & StateProps;
 class NonceField extends React.Component<Props> {
   public render() {
     const { alwaysDisplay, requestNonce, nonePending } = this.props;
+
+    const X = ({ value, raw, readOnly, onChange }) => (
+      <div className="nonce-input-wrapper">
+        <input
+          className={`form-control nonce-input ${!!value ? 'is-valid' : 'is-invalid'}`}
+          type="number"
+          placeholder="e.g. 7"
+          value={raw}
+          readOnly={readOnly}
+          onChange={onChange}
+        />
+        <button className="nonce-refresh" onClick={requestNonce}>
+          <img src={RefreshIcon} alt="refresh" />
+        </button>
+      </div>
+    );
+
     return (
       <NonceFieldFactory
         withProps={({ nonce: { raw, value }, onChange, readOnly, shouldDisplay }) => {
@@ -39,21 +56,18 @@ class NonceField extends React.Component<Props> {
                     'https://myetherwallet.github.io/knowledge-base/transactions/what-is-nonce.html'
                   }
                 />
+                <DelayLoader
+                  delay={1500}
+                  loader={
+                    <>
+                      <InlineSpinner active={true} text="Calculating" />
                       <div className="flex-spacer" />
-                <InlineSpinner active={nonePending} text="Calculating" />
-              </div>
-              <div className="nonce-input-wrapper">
-                <input
-                  className={`form-control nonce-input ${!!value ? 'is-valid' : 'is-invalid'}`}
-                  type="number"
-                  placeholder="e.g. 7"
-                  value={raw}
-                  readOnly={readOnly}
-                  onChange={onChange}
+                    </>
+                  }
+                  passedProps={{ value, raw, readOnly, onChange }}
+                  showLoader={nonePending}
+                  withProps={p => <X {...p} />}
                 />
-                <button className="nonce-refresh" onClick={requestNonce}>
-                  <img src={RefreshIcon} alt="refresh" />
-                </button>
               </div>
             </React.Fragment>
           ) : null;

common/components/ui/InlineSpinner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Spinner } from 'components/ui';
 import './InlineSpinner.scss';
@@ -15,3 +15,55 @@ export const InlineSpinner: React.SFC<{
     </div>
   </CSSTransition>
 );
+
+interface Props<T> {
+  passedProps: T;
+  showLoader: boolean;
+  loader: React.ReactElement<any>;
+  delay: number;
+  withProps(props: T): React.ReactElement<any> | null;
+}
+
+interface State<T> {
+  shouldShowLoader: boolean;
+  propsToPass: T;
+  waitOnTimeout: boolean;
+}
+
+export class DelayLoader<T> extends Component<Props<T>, State<T>> {
+  constructor(props: Props<T>) {
+    super(props);
+    this.state = {
+      propsToPass: props.passedProps,
+      shouldShowLoader: props.showLoader,
+      waitOnTimeout: false
+    };
+  }
+
+  public componentWillReceiveProps(nextProps: Props<T>) {
+    if (this.state.shouldShowLoader === nextProps.showLoader && !this.state.waitOnTimeout) {
+      this.setState({ propsToPass: nextProps.passedProps });
+    } else if (nextProps.showLoader) {
+      this.setState({ shouldShowLoader: true, waitOnTimeout: true });
+    } else {
+      window.setTimeout(
+        () =>
+          this.setState({
+            propsToPass: nextProps.passedProps,
+            shouldShowLoader: false,
+            waitOnTimeout: false
+          }),
+        this.props.delay
+      );
+    }
+  }
+
+  public render() {
+    return (
+      <>
+        {this.state.shouldShowLoader && this.props.loader}{' '}
+        {this.props.withProps(this.state.propsToPass)}{' '}
+      </>
+    );
+  }
+}