 ReactLoaderMixin = require 'react-loadermixin'
 
 {PropTypes} = React
-{span, img} = React.DOM
+{span, img, noscript} = React.DOM
 
 Status =
   PENDING: 'pending'


ImageLoaderImg = React.createClass
  displayName: 'ImageLoaderImage'
  handleLoad: (args...) ->
    return unless @isMounted()
    image = @refs.image

    else @props.onLoad? args...
  handleError: (args...) ->
    @props.onError? args...
  renderImg: ->
    (img merge @props,
      ref: 'image'
      onLoad: @handleLoad
      onError: @handleError
    )
  render: ->
    if @state.isInitialRender
      # We will initially render the <img> tag in a <noscript> (see note in
      # `getInitialState` for reasons). This will increase accessibility in that
      # rare case when the serialized component is served to a browser with
      # javascript disabled, but ensure that the image won't start loading
      # before we're ready. However, there is an issue
      # (https://github.com/facebook/react/issues/1252) that causes noscript to
      # cause invariant violations when rendered on the server. So, we render it
      # as a string and set the inner HTML of a wrapper span.
      html = React.renderComponentToStaticMarkup (noscript null, @renderImg())
      (span
        style:
          display: 'none'
        dangerouslySetInnerHTML:
          __html: html
      )
    else
      @renderImg()


module.exports = ImageLoader = React.createClass
