title: How to solve data loading issue in React redux
body: <p>I am trying to figure out how can i manage/display this component when data is still loading.</p>
  
  <p>I am using react redux for this case.</p>
  
  <p>any suggestion for solving this out?</p>
  
  <p>Although I wrapped this with lazy loading but it seems it is not that much working in this case.</p>
  
  <p>Any suggestion for this.</p>
  
  <p>//Actions.js</p>
  
  <pre><code>export const getContact= () =&gt; dispatch =&gt; {
      dispatch(setResumesLoading());
      axios
          .get('/api/contacts')
          .then(res =&gt; 
              dispatch({
                  type: GET_CONTACTS,
                  payload: res.data
              })
          ).catch (err =&gt; dispatch (returnErrors(err.response.data, err.response.status)));
  };
  </code></pre>
  
  <p>//component.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import {Grid, Cell, List, ListItem, ListItemContent, Button} from 'react-mdl';
  import { connect } from 'react-redux';
  import { getContact, deleteContact} from '../../actions/resumeActions';
  import PropTypes from 'prop-types';
  
  class Contact extends Component{
  
      static propTypes = {
          getContact: PropTypes.func.isRequired,
          deleteContact: PropTypes.func.isRequired,
          resume: PropTypes.object.isRequired,
          isAuthenticated: PropTypes.bool,
          auth: PropTypes.object.isRequired
      }
  
      componentDidMount() {
          this.props.getContact();
      }
  
      onDeleteContactClick = (id) =&gt; {
          this.props.deleteContact(id);
      };
  
      render(){
          const { contacts } = this.props.resume;
          const { user } = this.props.auth;
  
          return(
              &lt;div&gt;
                  {/* {loading ? &lt;Loading /&gt; : &lt;ResultsComponent results={data} /&gt;} */}
                   {contacts.map(({ _id, contact_name, contact_phone, contact_email, contact_skype, contact_image }) =&gt; (
              &lt;Grid key={_id} timeout={100} classNames="fade"&gt;
  
                 { this.props.isAuthenticated &amp;&amp; (user.is_admin === true) ? 
                              &lt;Button className="remove-btn"
                              color="danger"
                              size="sm"
                              onClick= {this.onDeleteContactClick.bind(this, _id)}&gt;
                                  &amp;times;
                              &lt;/Button&gt; : null }
                      &lt;Cell col={6}&gt;
                          &lt;div style={{textAlign: 'center'}}&gt;
                              &lt;h2&gt; {contact_name} &lt;/h2&gt;
                              &lt;img src={contact_image}
                              alt="avatar"
                              style={{height: '40%', borderRadius: '50%', width: '50%'}}
                              img-rounded /&gt;
                          &lt;/div&gt;
  
                      &lt;/Cell&gt;
                      &lt;Cell col={6} className="contact-right-col text-center"&gt;
  
                          &lt;h2 &gt;Contact Me&lt;/h2&gt;
                          &lt;hr  className="resume-left-contact-section-border" /&gt;
  
                          &lt;List&gt;
                            &lt;ListItem&gt;
                              &lt;ListItemContent  className="contact-list-item"&gt;
                                  &lt;i className="fa fa-phone-square" aria-hidden="true"/&gt;
                                  {contact_phone}
                              &lt;/ListItemContent&gt;
                            &lt;/ListItem&gt;
                          &lt;/List&gt;
  
                      &lt;/Cell&gt;
              &lt;/Grid&gt;
              ))} 
              &lt;/div&gt;
  
  
          )
      }
  }
  
  
  
  const mapStateToProps = (state) =&gt; ({
      resume: state.resume,
      isAuthenticated : state.auth.isAuthenticated,
      auth: state.auth
  });
  
  export default connect(mapStateToProps, {getContact, deleteContact }) (Contact);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/l2Tx5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l2Tx5.png" alt="content is still loading..."></a></p>