Loading Pure component

gistfile1.js

import PureComponent from './purecomponent.react'
import React from 'react'
import classnames from 'classnames'
import {msg} from '../intl/store'

require('./loading.styl')

export default class Loading extends PureComponent {

  constructor(props) {
    super(props)
    this.state = {
      shown: false
    }
  }

  // To prevent load messages blinking. It doesn't make sense to show text <1s.
  hideNowShowLater() {
    this.setState({shown: false})
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
      this.setState({
        shown: true
      })
    }, this.props.delay)
  }

  componentDidMount() {
    this.hideNowShowLater()
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.loaded) return
    this.hideNowShowLater()
  }

  componentWillUnmount() {
    clearTimeout(this.timer)
  }

  render() {
    const className = classnames('loading-component', {
      loaded: this.props.loaded,
      shown: this.state.shown
    })
    const children = this.props.loaded
      ? this.props.children
      : this.state.shown
        ? this.props.message || msg('components.loading.message')
        : ''

    return (
      <div className={className}>{children}</div>
    )
  }

}

Loading.propTypes = {
  children: React.PropTypes.node,
  delay: React.PropTypes.number,
  loaded: React.PropTypes.bool,
  message: React.PropTypes.string
}

Loading.defaultProps = {
  // http://www.nngroup.com/articles/response-times-3-important-limits/
  delay: 1000,
  loaded: false
}