broken - React Loading Mixin

by Trever Shick

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<link rel="stylesheet" href="https://rally1.rallydev.com/slm/js-lib/rui/builds/rui/resources/css/rui-fonts.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="here" />

SCSS

body {
    font-family:"ProximaNova";
}
.button {
    border:1px solid gray;
    border-radius:2px;
    background-color:#9c9c9c;
    color:white;
    padding:4px 8px;
    position:absolute;
    text-decoration:none;
    top:150px;
    font-family:"NotoSans";
    &:hover {
        opacity:0.75;
    }
}

.loading-container {
    position: relative;
    
    .loading-overlay {
        border:1px solid rgba(100,100,100,0.5);;
        background-color:rgba(144,144,144,0.5);
        position: absolute;
        z-index: 5000;
        left: 0;
        top: 0;
        right:0;
        bottom:0;
        border-radius:2px;
        
        > div {
            top:50%;
            left:50%;
        	transform: translateY(-50%) translateX(-50%);
            position:absolute;
            padding:8px 24px 8px 24px;
            border-radius:3px;
            background-color:white;
            opacity:1;
            img {
                width:16px;
                vertical-align:middle;
            }
        }
    }
    .loading-content {
        z-index: 0;
        opacity:0.3;
    }
}

JavaScript 1.7

var LoadingMixin = {

  wrappedRender: function(originalRender) {
    var loading = this.props.loading || false;
    var content = originalRender.apply(this);
    var loadingText = this.props.loadingText || "Loading...";

    if (loading) {
      return (
        <div className="loading-container">
          <div className="loading-overlay">
<div>          <img src="http://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" /> {loadingText}</div>
          </div>
          <div className="loading-content">
          {content}
          </div>
        </div>);
    }
    return content;
  },
  componentWillMount: function() {
    this.render = LoadingMixin.wrappedRender.bind(this, this.render);
  }
};






var Hello = React.createClass({
    mixins: [ LoadingMixin ],
    render: function() {
        var s = {
            height: this.props.height
        };
        return <div style={s} className="hello">Hello {this.props.name}</div>;
    }
});

var loading = false;
var toggleIt = function() {
    loading = !loading;
    rerender();
};
var rerender = function() {
    React.render(
        <div>
        <Hello name="World" loading={loading} height="100px" loadingText="Yeah Baby! Grrr " />
        <a href="#" className="button" onClick={toggleIt}>Toggle It</a>
        </div>, document.getElementById("here"));

}

rerender();