Q:

Show loader in Material-UI CardMedia

I am trying to show loader in CardMedia when image is not loaded yet but its not working.  If I place loader in CardText then the page is working and a loader is shown.  What's wrong with my code or is there a solution to show loader in card media before image loads? 

I am using material-ui v0 version. 
Here is my code
Loader:
renderLoading(){
return (
  <RefreshIndicator
    size={40}
    left={10}
    top={0}
    status="loading"
    style={{marginLeft: '50%', display: 'inline-block', position: 'relative'}}
/>
)
}

Card:
<CardMedia overlay={<CardTitle title={this.props.userName} subtitle="Your cover photo" />}>
   {this.props.coverPhotoLoading && this.renderLoading()} //this isn't working 
   {coverPhoto ?  <img src={coverPhoto} width="100%" height="400px"/> :
      <img src="" alt="This user cover photo is not set" width="100%" height="400px"/>}

</CardMedia>

A:

The reason this is happening is because you're trying to display both the <RefreshIndicator /> and an empty <img/> at the same time.  
Consider doing something like the following:
<CardMedia overlay={<CardTitle title={this.props.userName} subtitle="Your cover photo" />}>
   {! this.props.coverPhotoLoading && coverPhoto ? 
    <img src={coverPhoto} width="100%" height="400px"/> :
    this.renderLoading()}
</CardMedia>

