feat: buffer while scrolling with progressive loading. (#273)

dhis2 · Apr 3, 2019 · 7bea49b · 7bea49b
1 parent 3f8ec59
commit 7bea49b
Showing 1 changed file with 7 additions and 20 deletions.
diff --git a/src/components/Item/ProgressiveLoadingContainer.js b/src/components/Item/ProgressiveLoadingContainer.js
@@ -3,20 +3,17 @@ import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
 
 const defaultDebounceMs = 100;
-const defaultBufferPx = 0;
-const defaultInitialBufferFactor = 0.5;
+const defaultBufferFactor = 0.25;
 
 class ProgressiveLoadingContainer extends Component {
     static propTypes = {
         children: PropTypes.node.isRequired,
         debounceMs: PropTypes.number,
-        bufferPx: PropTypes.number,
-        initialBufferFactor: PropTypes.number,
+        bufferFactor: PropTypes.number,
     };
     static defaultProps = {
         debounceMs: defaultDebounceMs,
-        bufferPx: defaultBufferPx,
-        initialBufferFactor: defaultInitialBufferFactor,
+        bufferFactor: defaultBufferFactor,
     };
 
     state = {
@@ -25,8 +22,8 @@ class ProgressiveLoadingContainer extends Component {
     containerRef = null;
     shouldLoadHandler = null;
 
-    checkShouldLoad(customBufferPx) {
-        const bufferPx = customBufferPx || this.props.bufferPx;
+    checkShouldLoad() {
+        const bufferPx = this.props.bufferFactor * window.innerHeight;
 
         if (!this.containerRef) {
             return;
@@ -59,25 +56,15 @@ class ProgressiveLoadingContainer extends Component {
 
     componentDidMount() {
         this.registerHandler();
-
-        const initialBufferPx = this.props.initialBufferFactor
-            ? this.props.initialBufferFactor * window.innerHeight
-            : undefined;
-        this.checkShouldLoad(initialBufferPx);
+        this.checkShouldLoad();
     }
 
     componentWillUnmount() {
         this.removeHandler();
     }
 
     render() {
-        const {
-            children,
-            debounceMs,
-            bufferPx,
-            initialBufferFactor,
-            ...props
-        } = this.props;
+        const { children, debounceMs, bufferFactor, ...props } = this.props;
         const { shouldLoad } = this.state;
 
         return (