speed(homepage) refactor approach to use existing package

Author: EugeneHlushko

package.json

@@ -149,6 +149,7 @@
     "react-dom": "^16.2.0",
     "react-g-analytics": "0.4.2",
     "react-hot-loader": "^4.0.0-beta.12",
+    "react-intersection-observer": "^8.22.6",
     "react-markdown": "4.0.4",
     "react-router-dom": "^4.2.2",
     "react-tiny-popover": "3.4.2",

src/components/Contributors/Contributors.jsx

@@ -1,33 +1,48 @@
 import React from 'react';
-import VisibilitySensor from '../VisibilitySensor/VisibilitySensor';
+import { InView } from 'react-intersection-observer';
 import SmallIcon from '../../assets/icon-square-small-slack.png';
 import './Contributors.scss';
 
-export default class Contributors extends VisibilitySensor {
+export default class Contributors extends React.Component {
+  state = {
+    inView: false
+  }
+
+  handleInView = (inView) => {
+    if (!inView) {
+      return;
+    }
+    this.setState({ inView });
+  }
+
   render() {
-    const { isVisible } = this.state;
+    const { inView } = this.state;
     const { contributors } = this.props;
 
     if (!contributors.length) {
       return <noscript />;
     }
 
     return (
-      <div className="contributors" ref={ this.visibilityTarget }>
+      <InView as="div"
+        onChange={ this.handleInView }
+        threshold={ 0 }
+        triggerOnce
+        className="contributors">
         <div className="contributors__list">
           {
             contributors.map(contributor => (
               <a key={ contributor }
                 className="contributor"
                 href={ `https://github.com/${contributor}` }>
                 <img alt={ contributor }
-                  src={ isVisible ? `https://github.com/${contributor}.png?size=90` : SmallIcon } />
+                  src={ inView ? `https://github.com/${contributor}.png?size=90` : SmallIcon } />
                 <span className="contributor__name"> {contributor}</span>
               </a>
             ))
           }
         </div>
-      </div>
+      </InView>
     );
   }
 }

src/components/Support/Support.jsx

@@ -1,6 +1,6 @@
 // Import External Dependencies
 import React from 'react';
-import VisibilitySensor from '../VisibilitySensor/VisibilitySensor';
+import { InView } from 'react-intersection-observer';
 
 // Import Data
 import Backers from './_supporters.json';
@@ -62,10 +62,22 @@ function formatMoney(number) {
   return str;
 }
 
-export default class Support extends VisibilitySensor {
+export default class Support extends React.Component {
+  state = {
+    inView: false
+  }
+
+  handleInView = (inView) => {
+    if (!inView) {
+      return;
+    }
+    this.setState({ inView });
+  };
+
   render() {
     let { rank } = this.props;
-    const { isVisible } = this.state;
+
+    const { inView } = this.state;
 
     let supporters = SUPPORTERS;
     let minimum, maximum, maxAge, limit, random;
@@ -110,7 +122,11 @@ export default class Support extends VisibilitySensor {
     }
 
     return (
-      <div className="support" ref={ this.visibilityTarget }>
+      <InView as="div"
+        onChange={ this.handleInView }
+        threshold={ 0 }
+        triggerOnce
+        className="support">
         <div className="support__description">
           { rank === 'backer' ? (
             <p>
@@ -136,7 +152,7 @@ export default class Support extends VisibilitySensor {
                href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
               {<img
                 className={ `support__${rank}-avatar` }
-                src={ (isVisible && supporter.avatar) ? supporter.avatar : SmallIcon }
+                src={ (inView && supporter.avatar) ? supporter.avatar : SmallIcon }
                 alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' }
                 onError={ this._handleImgError } />}
             </a>
@@ -148,7 +164,7 @@ export default class Support extends VisibilitySensor {
             Become a { rank === 'backer' ? 'backer' : 'sponsor' }
           </a>
         </div>
-      </div>
+      </InView>
     );
   }
 

src/components/VisibilitySensor/VisibilitySensor.jsx

@@ -9,7 +9,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.1.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
   integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
@@ -9113,6 +9113,14 @@ react-hot-loader@^4.0.0-beta.12:
     shallowequal "^1.0.2"
     source-map "^0.7.3"
 
+react-intersection-observer@^8.22.6:
+  version "8.22.6"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.22.6.tgz#b03ad27a612bdbb5510f5fd21e997bdfc012d784"
+  integrity sha512-xhQK9jqU4yUUCQPne4rXt21ExnWTpbC3fhXlJlWOchFH2S9kaf0CJU5pTyCds2HKs43QE1+y4sGkBAoktnpdGg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    invariant "^2.0.0"
+
 react-is@^16.7.0, react-is@^16.8.1:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"