Lazy loading via awesome component

src/js/components/LazyLoadListener.js

@@ -0,0 +1,38 @@
+
+import React, { PropTypes } from 'react'
+
+export default class LazyLoadListener extends React.Component{
+
+	constructor(props) {
+		super(props);
+		this.state = { loading: false }
+		this.handleScroll = this.handleScroll.bind(this);
+	}
+
+	componentWillMount(){
+		window.addEventListener("scroll", this.handleScroll, false);
+	}
+
+	componentWillUnmount(){
+		window.removeEventListener("scroll", this.handleScroll, false);
+	}
+
+	handleScroll(e){
+	    if( (window.innerHeight + window.scrollY) >= document.body.offsetHeight ){
+	    	if( !this.state.loading ){
+				this.setState({ loading: true })
+				this.props.loadMore();
+			}
+	    }else if( this.state.loading ){
+			this.setState({ loading: false })
+	    }
+	}
+
+	render(){
+		if( this.loading ){
+			return <div className='lazy-loader loading'><div className="content">LOADING</div></div>
+		}else{
+			return <div className='lazy-loader'></div>
+		}
+	}
+}

src/js/components/Thumbnail.js

@@ -20,11 +20,10 @@ export default class Thumbnail extends React.Component{
 	}
 
 	componentWillReceiveProps( nextProps ){
-		this.mapImageSizes();
+		this.mapImageSizes( nextProps.images );
 	}
 
-	mapImageSizes(){
-		var images = this.props.images;
+	mapImageSizes( images = this.props.images ){
 		var state = this.state;
 
 		if( images.length <= 0 ){