title: Loading indicator inside redux-form
body: <p>I am trying to display the loading indicator inside redux form and I want the loading indicator place inside the card content(Bulma CSS framework). The code below is work because of the conditional checking logic in render function. When <code>ticket</code> is <code>null</code>, I straight away return <code>&lt;div&gt;Loading&lt;/div&gt;</code>. But when I remove that condition, it able to display the loading indicator, but the form not able to display initial values alhough it consist of initial values in the <code>redux-form</code> props. Do anyone have scenario like this before and how to solve this properly?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
      
      import TicketForm from '../TicketForm/TicketForm';
      import CustomerForm from '../CustomerForm/CustomerForm';
      
      class TicketPanel extends Component {
          componentWillMount() {
              this.props.fetchTicket(this.props.ticketId);
          }
      
          render() {
              const {ticket, loading, error} = this.props.activeTicket;
      
              const isComponentLoading = loading || ticket === null;
              const initialValuesForTicket = isComponentLoading ? {} : ticket.original_ticket_payload;
              const initialValuesForCustomer = isComponentLoading ? {} : ticket.contact;
      
              if (error) {
                  return &lt;div&gt;Error&lt;/div&gt;
              } else if (ticket === null) {
                  return &lt;div&gt;Loading&lt;/div&gt;
              }
      
              return (
                  &lt;div className="ticket-panel"&gt;
                      &lt;TicketForm
                          loading={isComponentLoading}
                          initialValues={initialValuesForTicket} /&gt;
                  &lt;/div&gt;
              )
      
          }
      }
      
      export default TicketPanel;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Below is the component code that consist of the logic that render out the form. It will show form component or loading component depends on the <code>loading</code> props value that pass from parent.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
      import CSSModules from 'react-css-modules';
      import {Field, reduxForm} from 'redux-form';
      import {ID_TYPE_COLLECTION} from 'utilities/constant';
      
      import styles from './TicketForm.scss';
      
      class TicketForm extends Component {
          renderIdTypes () {
              return ID_TYPE_COLLECTION.map(idType =&gt; {
                  return &lt;option key={idType.value} value={idType.value}&gt;{idType.title}&lt;/option&gt;;
              });
          }
      
          render() {
              const {handleSubmit, loading} = this.props;
      
              const loadingComponentClass = loading ? "card-content" : "is-hidden";
              const formComponentClass = loading ? "is-hidden" : "card-content";
      
              return (
                  &lt;div className="card"&gt;
                      &lt;header className="card-header"&gt;
                          &lt;p className="card-header-title"&gt;
                              Ticket
                          &lt;/p&gt;
                      &lt;/header&gt;
                      &lt;form onSubmit={handleSubmit}&gt;
                          &lt;div className={loadingComponentClass}&gt;
                              &lt;div className="content"&gt;
                                  &lt;div className="is-component-loading"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className={formComponentClass}&gt;
                              &lt;div className="content"&gt;
                                  &lt;div className="field is-horizontal"&gt;
                                      &lt;div className="field-label"&gt;
                                          &lt;label className="label"&gt;
                                              Name
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div className="field-body"&gt;
                                          &lt;div className="field"&gt;
                                              &lt;div className="control"&gt;
                                                  &lt;Field className="input" name="name" component="input" type="text" placeholder="Name" /&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="field is-horizontal"&gt;
                                      &lt;div className="field-label"&gt;
                                          &lt;label className="label"&gt;
                                              ID Type
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div className="field-body"&gt;
                                          &lt;div className="field"&gt;
                                              &lt;div className="control"&gt;
                                                  &lt;div className="select is-fullwidth"&gt;
                                                      &lt;Field className="input" name="owner_id_type" component="select"&gt;
                                                          {this.renderIdTypes()}
                                                      &lt;/Field&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="field is-horizontal"&gt;
                                      &lt;div className="field-label"&gt;
                                          &lt;label className="label"&gt;
                                              NRIC
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div className="field-body"&gt;
                                          &lt;div className="field"&gt;
                                              &lt;div className="control"&gt;
                                                  &lt;Field className="input" name="nric" component="input" type="text" placeholder="NRIC" /&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="field is-horizontal"&gt;
                                      &lt;div className="field-label"&gt;
                                          &lt;label className="label"&gt;
                                              Car Plate
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div className="field-body"&gt;
                                          &lt;div className="field"&gt;
                                              &lt;div className="control"&gt;
                                                  &lt;Field className="input" name="car_plate" component="input" type="text" placeholder="Car Plate" /&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="field is-horizontal"&gt;
                                      &lt;div className="field-label"&gt;
                                          &lt;label className="label"&gt;
                                              Mileage
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div className="field-body"&gt;
                                          &lt;div className="field"&gt;
                                              &lt;div className="control"&gt;
                                                  &lt;Field className="input" name="mileage" component="input" type="text" placeholder="Mileage" /&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;footer className="card-footer"&gt;
                              &lt;a className="card-footer-item"&gt;Reset&lt;/a&gt;
                              &lt;a className="card-footer-item"&gt;Save&lt;/a&gt;
                          &lt;/footer&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              );
          }
      }
      
      TicketForm = reduxForm({
          form: 'TicketForm'  // a unique identifier for this form
      })(TicketForm)
      
      export default CSSModules(TicketForm, styles)</code></pre>
  </div>
  </div>
  </p>