CODEWITHSUNDEEP
reactjsmaterial-ui
Hemadri Dasari
Hemadri Dasari

Reputation: 34004

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?

Screenshot for your ref

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>

Upvotes: 3

Views: 3083

Answers (1)

CaseyC
CaseyC

Reputation: 1482

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>

Upvotes: 2

Related Questions