title: Show a react-placeholder skeleton until a image loaded completely in a page
body: <p>I'm Beginner in react, i want to show a skeleton placeholder until a image loads completely in my page so I used <code>react-placeholder</code> library for skeleton loader and set the <code>loaded</code> state to <code>false</code> so the skeleton loader shows.
  I then change the loaded to true by setState it on onLoad function on <code>img</code> tag but my problem is the state is not changing so the skeleton loader shows infinitely thus hiding the image.</p>
  
  <p>how to fix this? what i done wrong here? Someone please help me solve this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactPlaceholder from 'react-placeholder';
  
  class Home extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loaded: false
      }
    }
    handleImageLoaded() {
      this.setState({ loaded: true });
    }
    render() {
      return ( 
      &lt;React.Fragment&gt;
        &lt;ReactPlaceholder type = 'rect' ready = {this.state.loaded} style = {{height: 160}} &gt;
          &lt;div className = "imageHolder" &gt;
            &lt;img src ="http://someImage.png" alt = "" onLoad={this.handleImageLoaded.bind(this)} /&gt;
          &lt;/div&gt; 
        &lt;/ReactPlaceholder&gt; 
      
      &lt;/React.Fragment&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>