...
 
Commits (2)
import * as React from 'react'
import Spinner from './Spinner'
class LazyImage extends React.Component {
state = {
......@@ -49,6 +48,8 @@ class LazyImage extends React.Component {
initializeLoading(src) {
this.image = new Image()
/* eslint react/no-direct-mutation-state: 0 */
this.state.loading = true
this.image.src = src
this.image.onload = this.handleLoad
this.image.onerror = this.handleError
......@@ -62,7 +63,7 @@ class LazyImage extends React.Component {
}
handleLoad(e) {
if (this.state.isMounted) {
if (this.state.isMounted && this.image) {
this.setState({
loading: false
})
......@@ -79,13 +80,15 @@ class LazyImage extends React.Component {
}
render() {
if (this.state.loading) {
return (<Spinner />)
}
const childrenWithProps = React.Children.map(this.props.children, child =>
React.cloneElement(child, {
noImage: this.state.loading || this.state.error
})
)
return (
<div className="lazy-image fade-in one">
{ this.props.children }
{ childrenWithProps }
</div>
)
}
......
......@@ -14,17 +14,26 @@ type Props = {
}
const CoverImage = (props: Props) => {
const Content = (props: any) => {
const placeholderUrl = 'logo.png'
const imageUrl = props.noImage ? placeholderUrl : props.src
return (
<div
className='cover-image'
style={{backgroundImage: `url(${imageUrl})`}}
data-alt={ props.alt }
/>
)
}
const Img = (props) => {
return (
<LazyImage
src={props.src}
srcAlt={props.alt}
>
<div
className='cover-image'
style={{backgroundImage: `url(${props.src})`}}
data-alt={ props.alt }
/>
<Content src={props.src} />
</LazyImage>
)
}
......
......@@ -71,6 +71,7 @@ const MusicTable = (props: Props) => {
width={width}
overscanRowCount={6}
scrollToIndex={currentIndex}
isScrollingOptOut
recomputeRowHeights
/>
)}
......