Add lazyload component

src/components/LazyLoad/index.js

@@ -0,0 +1,27 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class LazyLoad extends Component {
+  static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+    isEnd: PropTypes.bool.isRequired,
+    isLoaded: PropTypes.bool,
+    onLazyLoad: PropTypes.func.isRequired,
+    loadingComponent: PropTypes.any,
+    endComponent: PropTypes.any
+  }
+
+  static defaultProps = {
+    loadingComponent: 'Loading...',
+    endComponent: 'End.'
+  }
+
+  render() {
+    const { isEnd, loadingComponent, endComponent } = this.props;
+
+    if (isEnd) {
+      return endComponent;
+    }
+
+    return loadingComponent;
+  }
+}

src/containers/Surah/index.js

@@ -8,6 +8,7 @@ import Col from 'react-bootstrap/lib/Col';
 import Helmet from 'react-helmet';
 
 // components
+import LazyLoad from '../../components/LazyLoad';
 import PageBreak from '../../components/PageBreak';
 import Audioplayer from '../../components/Audioplayer';
 import ContentDropdown from '../../components/ContentDropdown';
@@ -300,35 +301,37 @@ export default class Surah extends Component {
     const { isEndOfSurah, surah } = this.props;
     const { lazyLoading } = this.state;
 
-    if (isEndOfSurah && !lazyLoading) {
-      return (
-        <ul className="pager">
-          {
-            surah.id > 1 &&
-            <li className="previous">
-              <Link to={`/${surah.id * 1 - 1}`}>
-                &larr; Previous Surah
-              </Link>
-            </li>
-          }
-          <li className="text-center">
-            <Link to={`/${surah.id}`}>
-              Beginning of Surah
-            </Link>
-          </li>
-          {
-            surah.id < 114 &&
-            <li className="next">
-              <Link to={`/${surah.id * 1 + 1}`}>
-                Next Surah &rarr;
+    return (
+      <LazyLoad
+        isEnd={isEndOfSurah && !lazyLoading}
+        endComponent={
+          <ul className="pager">
+            {
+              surah.id > 1 &&
+              <li className="previous">
+                <Link to={`/${surah.id * 1 - 1}`}>
+                  &larr; Previous Surah
+                </Link>
+              </li>
+            }
+            <li className="text-center">
+              <Link to={`/${surah.id}`}>
+                Beginning of Surah
               </Link>
             </li>
-          }
-        </ul>
-      );
-    }
-
-    return <p>Loading...</p>;
+            {
+              surah.id < 114 &&
+              <li className="next">
+                <Link to={`/${surah.id * 1 + 1}`}>
+                  Next Surah &rarr;
+                </Link>
+              </li>
+            }
+          </ul>
+        }
+        loadingComponent={<p>Loading...</p>}
+      />
+    );
   }
 
   renderAyahs() {