Stop flickering + added loader in AddressSelector (#4149)

* Stop UI flickering + added loader to AddressSelector #4103

* PR Grumbles

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -25,6 +25,7 @@ import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline';
 
 import AccountCard from '~/ui/AccountCard';
 import InputAddress from '~/ui/Form/InputAddress';
+import Loading from '~/ui/Loading';
 import Portal from '~/ui/Portal';
 import { nodeOrStringProptype } from '~/util/proptypes';
 import { validateAddress } from '~/util/validation';
@@ -130,7 +131,7 @@ class AddressSelect extends Component {
     const input = (
       <InputAddress
         accountsInfo={ accountsInfo }
-        allowCopy={ allowCopy }
+        allowCopy={ (disabled || readOnly) && allowCopy ? allowCopy : false }
         className={ className }
         disabled={ disabled || readOnly }
         error={ error }
@@ -182,17 +183,18 @@ class AddressSelect extends Component {
         <label className={ styles.label } htmlFor={ id }>
           { label }
         </label>
-        <input
-          id={ id }
-          className={ styles.input }
-          placeholder={ ilHint }
-
-          onBlur={ this.handleInputBlur }
-          onFocus={ this.handleInputFocus }
-          onChange={ this.handleChange }
-
-          ref={ this.setInputRef }
-        />
+        <div className={ styles.outerInput }>
+          <input
+            id={ id }
+            className={ styles.input }
+            placeholder={ ilHint }
+            onBlur={ this.handleInputBlur }
+            onFocus={ this.handleInputFocus }
+            onChange={ this.handleChange }
+            ref={ this.setInputRef }
+          />
+          { this.renderLoader() }
+        </div>
 
         <div className={ styles.underline }>
           <TextFieldUnderline
@@ -210,6 +212,19 @@ class AddressSelect extends Component {
     );
   }
 
+  renderLoader () {
+    if (!this.store.loading) {
+      return null;
+    }
+
+    return (
+      <Loading
+        className={ styles.loader }
+        size={ 0.5 }
+      />
+    );
+  }
+
   renderCurrentInput () {
     const { inputValue } = this.state;
 
@@ -304,7 +319,9 @@ class AddressSelect extends Component {
 
     return (
       <div className={ styles.category } key={ `${key}_${index}` }>
-        <div className={ styles.title }>{ label }</div>
+        <div className={ styles.title }>
+          <h3>{ label }</h3>
+        </div>
         { content }
       </div>
     );