Defer Captcha initialization. Add loader for Captcha

src/components/auth/register/RegisterBody.jsx

@@ -54,7 +54,7 @@ export default class RegisterBody extends BaseAuthBody {
                     placeholder={messages.repeatPassword}
                 />
 
-                <Captcha {...this.bindField('captcha')} />
+                <Captcha {...this.bindField('captcha')} delay={600} />
 
                 <Checkbox {...this.bindField('rulesAgreement')}
                     color="blue"

src/components/auth/resendActivation/ResendActivationBody.jsx

@@ -34,7 +34,7 @@ export default class ResendActivation extends BaseAuthBody {
                     defaultValue={this.context.user.email}
                 />
 
-                <Captcha {...this.bindField('captcha')} />
+                <Captcha {...this.bindField('captcha')} delay={600} />
             </div>
         );
     }

src/components/ui/form/Captcha.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import captcha from 'services/captcha';
 import { skins, SKIN_DARK } from 'components/ui';
+import { ComponentLoader } from 'components/ui/loader';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
@@ -12,25 +13,30 @@ export default class Captcha extends FormInputComponent {
     static displayName = 'Captcha';
 
     static propTypes = {
-        skin: PropTypes.oneOf(skins)
+        skin: PropTypes.oneOf(skins),
+        delay: PropTypes.number
     };
 
     static defaultProps = {
-        skin: SKIN_DARK
+        skin: SKIN_DARK,
+        delay: 0
     };
 
     componentDidMount() {
-        captcha.render(this.el, {
+        setTimeout(() => captcha.render(this.el, {
             skin: this.props.skin,
             onSetCode: this.setCode
-        });
+        }), this.props.delay);
     }
 
     render() {
         const {skin} = this.props;
 
         return (
-            <div>
+            <div className={styles.captchaContainer}>
+                <div className={styles.captchaLoader}>
+                    <ComponentLoader />
+                </div>
                 <div ref={this.setEl} className={classNames(
                     styles.captcha,
                     styles[`${skin}Captcha`]

src/components/ui/form/form.scss

@@ -295,7 +295,12 @@
     }
 }
 
+.captchaContainer {
+    position: relative;
+}
+
 .captcha {
+    position: relative;
     box-sizing: border-box;
     width: 100%;
     max-width: 302px;
@@ -327,6 +332,13 @@
     border-color: #dcd8cd;
 }
 
+.captchaLoader {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+}
+
 /**
  * Form validation
  */