Показать загрузчик в Material-UI CardMedia - PullRequest
Новая
       8

Показать загрузчик в Material-UI CardMedia

0 голосов
/ 27 июня 2018

Я пытаюсь показать загрузчик в CardMedia, когда изображение еще не загружено, но не работает. Если я помещаю загрузчик в CardText, то страница работает и отображается загрузчик. Что не так с моим кодом или есть решение показать загрузчик на карточке до загрузки изображения?

Screenshot for your ref

Я использую версию material-ui v0.

Вот мой код

Loader: 

renderLoading(){
return (
  <RefreshIndicator
    size={40}
    left={10}
    top={0}
    status="loading"
    style={{marginLeft: '50%', display: 'inline-block', position: 'relative'}}
/>
)
}

карта: 

<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>

1 Ответ

0 голосов
/ 27 июня 2018

Причина, по которой это происходит, в том, что вы пытаетесь отобразить одновременно и <RefreshIndicator />, и пустой <img/>.

Попробуйте сделать что-то вроде следующего: 

<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>
...