Use react-lazyrender-mixin to lazily render feed items

frontend/components/FeedItem.jsx

@@ -2,9 +2,17 @@
 
 import React from 'react/addons';
 import moment from 'moment';
-import LazyLoad from 'react-lazy-load';
+import LazyRenderMixin from 'react-lazyrender-mixin';
 
 var FeedItem = React.createClass({
+  mixins: [ LazyRenderMixin ],
+
+  getDefaultProps () {
+    return {
+      placeholderClassName: 'feed-item-placeholder'
+    };
+  },
+
   propTypes: {
     showId: React.PropTypes.string.isRequired,
     imdbId: React.PropTypes.string,
@@ -26,7 +34,6 @@ var FeedItem = React.createClass({
     var timeAgo = moment(ts).fromNow();
 
     return (
-      <LazyLoad height="400px">
       <div className="feed-item">
         <div className="feed-item-header emerald">{timeAgo}</div>
         <div className="feed-item-body" style={localStyle}>
@@ -36,7 +43,6 @@ var FeedItem = React.createClass({
         </div>
         <div className="feed-item-footer emerald">Season {this.props.season}, Episode {this.props.episode}</div>
       </div>
-      </LazyLoad>
     );
   }
 

gulpfile.js

@@ -15,7 +15,7 @@ var isProduction = process.env.NODE_ENV !== 'development';
 var vendors = [
   'react',
   'react/addons',
-  'react-lazy-load',
+  'react-lazyrender-mixin',
   'moment',
   'axios',
   'immutable',

package.json

@@ -24,7 +24,7 @@
     "moment": "^2.10.3",
     "rc": "^1.0.3",
     "react": "^0.13.0",
-    "react-lazy-load": "git+https://github.com/maxkueng/react-lazy-load.git#npm-files",
+    "react-lazyrender-mixin": "^1.0.0",
     "react-router": "1.0.0-beta3",
     "request": "^2.58.0",
     "yomypopcorn-dbclient": "git+https://github.com/yomypopcorn/yomypopcorn-dbclient.git#master"

static/assets/styles/main.css

@@ -156,6 +156,10 @@ input[type="search"]:focus {
   margin: 2em;
 }
 
+.feed-item-placeholder {
+  height: 400px;
+}
+
 .feed-item-header,
 .feed-item-footer {
   height: 60px;