Redux-form semantic UI with AsyncValidation

Need help

I followed this example http://redux-form.com/6.6.3/examples/submitValidation/ and http://redux-form.com/6.6.3/examples/asyncValidation/

I use Semanitic-UI & made a loading state Redux-form component as code below:

Loading state of the semantic Input is: <Input loading icon='user' placeholder='Whatever...' /> You could find it here

And the render Field component is:

...
const ReduxFormInput = ({ input, label, placeholder, checkboxLabel, type, meta: { asyncValidate, touched, error } }) => {
  const errorMessage = (<div style={{ color: '#E20000', paddingTop: '.3rem', fontSize: '12px' }} >
    <Icon name="warning" />
    {error}
  </div>);

  return (
    <div>
      <Label>{label}</Label>
      <Input
        {...input}
        type={type}
        placeholder={placeholder}
        error={error ? true : null}
        loading={asyncValidate ? true : undefined} // load loading state when submitting 
        icon={asyncValidate ? 'user' : undefined} // load icon state when submitting
      />
      {touched && error && errorMessage}
    </div>
  );
};

export default ReduxFormInput;

The form work perfectly instead of Async Loading state within semantic-ui component.

My expect is the icon loading when submitting form

Thank you so much.

[vitbokisch]

@viiiprock you are welcome, btw console.log() will help you to understand what props are passed 😉

[vitbokisch]

@viiiprock const ReduxFormInput = ({ input, label, placeholder, checkboxLabel, type, meta: { submitting, asyncValidate, touched, error } }) => ...

<Input
  {...input}
  type={type}
  placeholder={placeholder}
  error={error ? true : null}
  loading={submitting|| asyncValidate ? true : undefined} // ---> semantic-ui-react loading prop, state when submitting 
  icon={submitting|| asyncValidate ? 'user' : undefined} // ---> semantic-ui-react icon prop, load icon when submitting
/>

What about like this?