Add lazyloading and Ad component

package.json

@@ -30,6 +30,7 @@
     "express": "^4.15.2",
     "file-loader": "^0.11.2",
     "html-loader": "^0.4.5",
+    "inferno-create-element": "^3.9.0",
     "node-sass": "^4.5.3",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.6",

src/components/MainDisplay.jsx

@@ -33,7 +33,8 @@ export const MainDisplay = ({ dictionaryInfo, wordsToDisplay, updateDisplay, upd
 
             <WordsList
               lastRender={ lastRender }
-              words={ wordsToDisplay } />
+              words={ wordsToDisplay }
+              adsEveryXWords={ 10 } />
           </RightColumn>
           
         </div>

src/components/display/Ad.jsx

@@ -0,0 +1,26 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export class Ad extends Component {
+  constructor (props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    // Insert ad initialization here
+  }
+
+  render () {
+    return (
+      <div className='notification'>
+
+        <div className='content'>
+          Want a feature-packed tool for building your conlang with an active community and inter-linked word definitions?
+          <br />
+          Check out <a href='http://conworkshop.info/' target='_blank'>ConWorkShop</a>!
+        </div>
+
+      </div>
+    );
+  }
+}

src/components/display/WordsList.jsx

@@ -2,21 +2,44 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
 
+// npm lazyload-inferno-component uses outdated inferno dependencies, so just using the script.
+import LazyLoader from '../../../vendor/LGabAnnell/lazyload-inferno-component/lazyload-component';
+
 import idManager from '../../managers/IDManager';
 
 import { WordDisplay } from './WordDisplay';
 
+const loadAd = (callback, { props, router }) => {
+  require.ensure([], (require) => {
+    const component = require("./Ad").Ad;
+    callback(component);
+  });
+};
+
 export class WordsList extends Component {
   constructor (props) {
     super(props);
   }
 
   render () {
+    const adsEveryXWords = this.props.adsEveryXWords || 10;
+
     return (
       <div className='box'>
 
         {this.props.words
-          && this.props.words.map(word => {
+          && this.props.words.map((word, index) => {
+            if (index % adsEveryXWords == 0) {
+              return (
+                <div>
+                  <LazyLoader lazyLoad={ loadAd } />
+                  
+                  <WordDisplay key={ `word_${word.id}` }
+                    word={ word } />
+                </div>
+              );
+            }
+
             return (
               <WordDisplay key={ `word_${word.id}` }
                 word={ word } />

vendor/LGabAnnell/lazyload-inferno-component/lazyload-component.js

@@ -0,0 +1,60 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var inferno_create_element_1 = require("inferno-create-element");
+var inferno_component_1 = require("inferno-component");
+/** @internal
+    * Function pretty much copied from infernojs - Route.ts
+  */
+function rest(object, excluded) {
+    var t = {};
+    for (var p in object) {
+        if (excluded.indexOf(p) < 0) {
+            t[p] = object[p];
+        }
+    }
+    return t;
+}
+var LazyLoader = /** @class */ (function (_super) {
+    __extends(LazyLoader, _super);
+    function LazyLoader(props, context) {
+        var _this = _super.call(this, props, context) || this;
+        _this.state = {
+            child: null
+        };
+        _this.context = context;
+        _this.lazyLoad = props.lazyLoad;
+        _this.children = props.children;
+        _this.loadComponent = _this.loadComponent.bind(_this);
+        return _this;
+    }
+    LazyLoader.prototype.loadComponent = function (componentName, props) {
+        var finalProps;
+        if (!props) {
+            finalProps = rest(this.props, ["lazyLoad", "children"]);
+        }
+        else {
+            finalProps = Object.assign({}, props, rest(this.props, ["lazyLoad", "children"]));
+        }
+        this.setState({
+            child: inferno_create_element_1.default(componentName, finalProps, this.children)
+        });
+    };
+    LazyLoader.prototype.componentWillMount = function () {
+        this.lazyLoad(this.loadComponent, { props: this.props, router: this.context.router });
+    };
+    LazyLoader.prototype.render = function () {
+        return this.state.child ? this.state.child : null;
+    };
+    return LazyLoader;
+}(inferno_component_1.default));
+exports.default = LazyLoader;