Add lodash.debounce and debounce PostsList scroll listener

Kryndex · Aug 3, 2016 · 5ee6a2c · 5ee6a2c
1 parent 0b7fbe9
commit 5ee6a2c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/app/components/cards/PostsList.jsx b/app/components/cards/PostsList.jsx
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 import PostSummary from 'app/components/cards/PostSummary';
 import LoadingIndicator from 'app/components/elements/LoadingIndicator';
 import shouldComponentUpdate from 'app/utils/shouldComponentUpdate';
+import debounce from "lodash.debounce";
 
 function topPosition(domElt) {
     if (!domElt) {
@@ -53,7 +54,8 @@ class PostsList extends React.Component {
         });
     }
 
-    scrollListener() {
+    scrollListener = debounce(() => {
+        console.log("scrollListener");
         const el = window.document.getElementById('posts_list');
         if (!el) return;
         const scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset :
@@ -64,13 +66,13 @@ class PostsList extends React.Component {
         }
 
         // Detect if we're in mobile mode (renders larger preview imgs)
-        var mq = window.matchMedia('screen and (max-width: 39.9375em)')
+        var mq = window.matchMedia('screen and (max-width: 39.9375em)');
         if(mq.matches) {
             this.setState({thumbSize: 'mobile'})
         } else {
             this.setState({thumbSize: 'desktop'})
         }
-    }
+    }, 150)
 
     attachScrollListener() {
         window.addEventListener('scroll', this.scrollListener);

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "koa-router": "^5.4.0",
     "koa-session": "^3.3.1",
     "koa-static-cache": "^3.1.2",
+    "lodash.debounce": "^4.0.7",
     "medium-editor-insert-plugin": "^2.3.2",
     "minimist": "^1.2.0",
     "mysql": "^2.10.2",