Handle 'onVisible' events in LazyLoadComponent, to avoid re-rendering all components stack

Author: Aljullu

src/components/LazyLoadComponent.jsx

@@ -1,30 +1,89 @@
 import React from 'react';
+import { PropTypes } from 'prop-types';
 
-import LazyLoadComponentWithoutTracking
-  from './LazyLoadComponentWithoutTracking.jsx';
-import LazyLoadComponentWithTracking
-  from './LazyLoadComponentWithTracking.jsx';
+import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.jsx';
+import PlaceholderWithTracking from './PlaceholderWithTracking.jsx';
 
 class LazyLoadComponent extends React.Component {
   constructor(props) {
     super(props);
 
-    const { scrollPosition } = props;
+    const { afterLoad, beforeLoad, scrollPosition, visibleByDefault } = props;
+
+    this.state = {
+      visible: visibleByDefault
+    };
+
+    if (visibleByDefault) {
+      beforeLoad();
+      afterLoad();
+    }
+
+    this.onVisible = this.onVisible.bind(this);
 
     this.isScrollTracked = (scrollPosition &&
       Number.isFinite(scrollPosition.x) && scrollPosition.x >= 0 &&
       Number.isFinite(scrollPosition.y) && scrollPosition.y >= 0);
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.visible !== this.state.visible) {
+      this.props.afterLoad();
+    }
+  }
+
+  onVisible() {
+    this.props.beforeLoad();
+    this.setState({
+      visible: true
+    });
+  }
+
   render() {
-    if (this.isScrollTracked) {
-      return <LazyLoadComponentWithoutTracking {...this.props} />;
+    if (this.state.visible) {
+      return this.props.children;
     }
 
-    const { scrollPosition, ...props } = this.props;
+    const { className, height, placeholder, scrollPosition, style,
+      threshold, width } = this.props;
 
-    return <LazyLoadComponentWithTracking {...props} />;
+    if (this.isScrollTracked) {
+      return (
+        <PlaceholderWithoutTracking
+          className={className}
+          height={height}
+          onVisible={this.onVisible}
+          placeholder={placeholder}
+          scrollPosition={scrollPosition}
+          style={style}
+          threshold={threshold}
+          width={width} />
+      );
+    }
+
+    return (
+      <PlaceholderWithTracking
+        className={className}
+        height={height}
+        onVisible={this.onVisible}
+        placeholder={placeholder}
+        style={style}
+        threshold={threshold}
+        width={width} />
+    );
   }
 }
 
+LazyLoadComponent.propTypes = {
+  afterLoad: PropTypes.func,
+  beforeLoad: PropTypes.func,
+  visibleByDefault: PropTypes.bool
+};
+
+LazyLoadComponent.defaultProps = {
+  afterLoad: () => ({}),
+  beforeLoad: () => ({}),
+  visibleByDefault: false
+};
+
 export default LazyLoadComponent;

src/components/LazyLoadComponent.spec.js

@@ -4,42 +4,106 @@ import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 import LazyLoadComponent from './LazyLoadComponent.jsx';
-import LazyLoadComponentWithTracking
-  from './LazyLoadComponentWithTracking.jsx';
-import LazyLoadComponentWithoutTracking
-  from './LazyLoadComponentWithoutTracking.jsx';
+import PlaceholderWithTracking from './PlaceholderWithTracking.jsx';
+import PlaceholderWithoutTracking from './PlaceholderWithoutTracking.jsx';
 
 configure({ adapter: new Adapter() });
 
 const {
-  scryRenderedComponentsWithType
+  scryRenderedComponentsWithType,
+  scryRenderedDOMComponentsWithTag
 } = ReactTestUtils;
 
 describe('LazyLoadComponent', function() {
-  it('renders a LazyLoadComponentWithTracking when scrollPosition is undefined', function() {
+  it('renders a PlaceholderWithTracking when scrollPosition is undefined', function() {
+    const lazyLoadComponent = mount(
+      <LazyLoadComponent
+        style={{marginTop: 100000}}>>
+        <p>Lorem Ipsum</p>
+      </LazyLoadComponent>
+    );
+
+    const placeholderWithTracking = scryRenderedComponentsWithType(
+      lazyLoadComponent.instance(), PlaceholderWithTracking);
+
+    expect(placeholderWithTracking.length).toEqual(1);
+  });
+
+  it('renders a PlaceholderWithoutTracking when scrollPosition is defined', function() {
+    const lazyLoadComponent = mount(
+      <LazyLoadComponent
+        scrollPosition={{ x: 0, y: 0}}
+        style={{marginTop: 100000}}>>
+        <p>Lorem Ipsum</p>
+      </LazyLoadComponent>
+    );
+
+    const placeholderWithoutTracking = scryRenderedComponentsWithType(
+      lazyLoadComponent.instance(), PlaceholderWithoutTracking);
+
+    expect(placeholderWithoutTracking.length).toEqual(1);
+  });
+
+  it('renders children when visible', function() {
     const lazyLoadComponent = mount(
       <LazyLoadComponent>
         <p>Lorem Ipsum</p>
       </LazyLoadComponent>
     );
 
-    const lazyLoadComponentWithTracking = scryRenderedComponentsWithType(
-      lazyLoadComponent.instance(), LazyLoadComponentWithTracking);
+    lazyLoadComponent.instance().onVisible();
+
+    const paragraphs = scryRenderedDOMComponentsWithTag(
+      lazyLoadComponent.instance(), 'p');
+
+    expect(paragraphs.length).toEqual(1);
+  });
+
+  it('triggers beforeLoad when onVisible is triggered', function() {
+    const beforeLoad = jest.fn();
+    const lazyLoadComponent = mount(
+      <LazyLoadComponent
+        beforeLoad={beforeLoad}
+        style={{marginTop: 100000}}>
+        <p>Lorem Ipsum</p>
+      </LazyLoadComponent>
+    );
+
+    lazyLoadComponent.instance().onVisible();
+
+    expect(beforeLoad).toHaveBeenCalledTimes(1);
+  });
+
+  it('triggers afterLoad when onVisible is triggered', function() {
+    const afterLoad = jest.fn();
+    const lazyLoadComponent = mount(
+      <LazyLoadComponent
+        afterLoad={afterLoad}
+        style={{marginTop: 100000}}>
+        <p>Lorem Ipsum</p>
+      </LazyLoadComponent>
+    );
+
+    lazyLoadComponent.instance().onVisible();
 
-    expect(lazyLoadComponentWithTracking.length).toEqual(1);
+    expect(afterLoad).toHaveBeenCalledTimes(1);
   });
 
-  it('renders a LazyLoadComponentWithoutTracking when scrollPosition is defined', function() {
+  it('triggers beforeLoad and afterLoad when visibleByDefault is true', function() {
+    const afterLoad = jest.fn();
+    const beforeLoad = jest.fn();
     const lazyLoadComponent = mount(
       <LazyLoadComponent
-        scrollPosition={{ x: 0, y: 0}}>
+        afterLoad={afterLoad}
+        beforeLoad={beforeLoad}
+        style={{marginTop: 100000}}>
         <p>Lorem Ipsum</p>
       </LazyLoadComponent>
     );
 
-    const lazyLoadComponentWithoutTracking = scryRenderedComponentsWithType(
-      lazyLoadComponent.instance(), LazyLoadComponentWithoutTracking);
+    lazyLoadComponent.instance().onVisible();
 
-    expect(lazyLoadComponentWithoutTracking.length).toEqual(1);
+    expect(afterLoad).toHaveBeenCalledTimes(1);
+    expect(beforeLoad).toHaveBeenCalledTimes(1);
   });
 });