simple lazy loading

client/app/sites/category.js

@@ -7,7 +7,9 @@ class Category extends React.Component {
   state = {
     category: {},
     items: [],
-    currentLoaded: config.loadingItems
+    currentLoaded: config.loadingItems,
+    moreLoaded: false,
+    moreToLoad: true
   }
 
   componentWillReceiveProps(nextProps) {
@@ -27,11 +29,24 @@ class Category extends React.Component {
 
   // todo: fix icon load.
   render() {
+    let loadContent;
+
+    if( ! this.state.moreLoaded) {
+      loadContent = <div className="load-more" onClick={this.loadMore.bind(this)}>Load more {this.state.category.name}</div>
+    } else {
+      loadContent = <i className="icon-load-more"></i>
+    }
+
     return (
 
       <div>
-        { ! this.state.items.length ? <i className="icon-content-load"></i> : <Box items={this.state.items} category={this.state.category} type="category" currentLoaded={this.state.currentLoaded} />}
+        {this.state.items.length
-        {this.state.items.length >= config.loadingItems ? <div className="wrap"><div className="load-more" onClick={this.loadMore.bind(this)}>Load more {this.state.category.name}</div></div> : ''}
+          ? <Box items={this.state.items} category={this.state.category} type="category" currentLoaded={this.state.currentLoaded} />
+          : <i className="icon-content-load"></i>}
+
+        {this.state.items.length >= config.loadingItems && this.state.moreToLoad
+          ? <div className="wrap"><div className="load-more-wrap">{loadContent}</div></div>
+          : ''}
       </div>
 
     );
@@ -49,12 +64,22 @@ class Category extends React.Component {
   }
 
   loadMore() {
-    Api.moreCategoryItems(this.state.category, this.state.currentLoaded).then((value) => {
+    this.setState({
-      this.setState({
+      moreLoaded: true
-        currentLoaded: this.state.currentLoaded + config.loadingItems,
-        items: this.state.items.concat(value)
-      });
     });
+
+    setTimeout(() => {
+
+      Api.moreCategoryItems(this.state.category, this.state.currentLoaded).then((value) => {
+        this.setState({
+          currentLoaded: this.state.currentLoaded + config.loadingItems,
+          items: this.state.items.concat(value),
+          moreLoaded: false,
+          moreToLoad: value.length ? true : false
+        });
+      });
+
+    }, 400);
   }
 }
 

client/assets/sass/_content.scss

@@ -70,7 +70,8 @@
 }
 
 .icon-content-load,
-.icon-box-load {
+.icon-box-load,
+.icon-load-more {
   background: url(../img/content-load.gif) no-repeats;
   width: 32px;
   height: 32px;
@@ -88,6 +89,17 @@
   top: 280px;
 }
 
+.load-more-wrap {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: 70px;
+}
+
+.icon-load-more {
+  top: 0;
+}
+
 .show-item-wrap {
   float: left;
   width: 100%;
@@ -114,11 +126,11 @@
   padding: 10px;
   float: left;
   width: 100%;
-  margin: 0 0 40px 0;
   text-align: center;
   text-transform: uppercase;
   color: #555;
   cursor: pointer;
+  position: relative;
 
   .light-theme & {
     background: #e9e9e9;