From 8ba8d6af3a6353fb55e48074fd66691fb32b1f5f Mon Sep 17 00:00:00 2001
From: EugeneHlushko <jhlushko@gmail.com>
Date: Wed, 24 Apr 2019 08:42:33 +0300
Subject: [PATCH 1/2] speed(homepage) offload images until in viewport

---
 src/components/Contributors/Contributors.jsx  | 50 +++++++++++--------
 src/components/Support/Support.jsx            |  8 +--
 .../VisibilitySensor/VisibilitySensor.jsx     | 47 +++++++++++++++++
 3 files changed, 81 insertions(+), 24 deletions(-)
 create mode 100644 src/components/VisibilitySensor/VisibilitySensor.jsx

diff --git a/src/components/Contributors/Contributors.jsx b/src/components/Contributors/Contributors.jsx
index 5c9322238ffc..d02c5730c846 100644
--- a/src/components/Contributors/Contributors.jsx
+++ b/src/components/Contributors/Contributors.jsx
@@ -1,25 +1,33 @@
 import React from 'react';
+import VisibilitySensor from '../VisibilitySensor/VisibilitySensor';
+import SmallIcon from '../../assets/icon-square-small-slack.png';
 import './Contributors.scss';
 
-export default ({contributors}) => {
-  if (!contributors.length) {
-    return <noscript />;
-  }
-
-  return (
-    <div className="contributors">
-      <div className="contributors__list">
-        {
-          contributors.map(contributor => (
-            <a key={ contributor }
-              className="contributor"
-              href={ `https://github.com/${contributor}` }>
-              <img alt={ contributor } src={ `https://github.com/${contributor}.png?size=90` } />
-              <span className="contributor__name"> {contributor}</span>
-            </a>
-          ))
-        }
+export default class Contributors extends VisibilitySensor {
+  render() {
+    const { isVisible } = this.state;
+    const { contributors } = this.props;
+    
+    if (!contributors.length) {
+      return <noscript />;
+    }
+  
+    return (
+      <div className="contributors" ref={ this.visibilityTarget }>
+        <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 } />
+                <span className="contributor__name"> {contributor}</span>
+              </a>
+            ))
+          }
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index f6f852f5a50f..ebc7d558c65f 100644
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -1,5 +1,6 @@
 // Import External Dependencies
 import React from 'react';
+import VisibilitySensor from '../VisibilitySensor/VisibilitySensor';
 
 // Import Data
 import Backers from './_supporters.json';
@@ -61,9 +62,10 @@ function formatMoney(number) {
   return str;
 }
 
-export default class Support extends React.Component {
+export default class Support extends VisibilitySensor {
   render() {
     let { rank } = this.props;
+    const { isVisible } = this.state;
 
     let supporters = SUPPORTERS;
     let minimum, maximum, maxAge, limit, random;
@@ -108,7 +110,7 @@ export default class Support extends React.Component {
     }
 
     return (
-      <div className="support">
+      <div className="support" ref={ this.visibilityTarget }>
         <div className="support__description">
           { rank === 'backer' ? (
             <p>
@@ -134,7 +136,7 @@ export default class Support extends React.Component {
                href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
               {<img
                 className={ `support__${rank}-avatar` }
-                src={ supporter.avatar || SmallIcon }
+                src={ (isVisible && supporter.avatar) ? supporter.avatar : SmallIcon }
                 alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' }
                 onError={ this._handleImgError } />}
             </a>
diff --git a/src/components/VisibilitySensor/VisibilitySensor.jsx b/src/components/VisibilitySensor/VisibilitySensor.jsx
new file mode 100644
index 000000000000..d00bc19727ad
--- /dev/null
+++ b/src/components/VisibilitySensor/VisibilitySensor.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+export default class VisibilitySensor extends React.Component {
+    state = {
+        isVisible: false
+    };
+
+    constructor(props) {
+        super(props);
+        this.visibilityTarget = React.createRef();
+    }
+
+    componentWillUnmount() {
+        this.stopListeningForVisibility();
+    }
+
+    componentDidMount () {
+        if (this.visibilityTarget.current) {
+            this.startListeningForVisibility();
+        }
+    }
+
+    startListeningForVisibility = () => {
+        if (typeof IntersectionObserver !== 'function') {
+            // fall back to rendering images
+            // browser doesnt support IntersectionObserver;
+            return this.setState({ isVisible: true });
+        }
+
+        this.observer = new IntersectionObserver(this.visibilityChanged, {
+            threshold: 0.05
+        });
+        this.observer.observe(this.visibilityTarget.current);
+    }
+
+    stopListeningForVisibility = () => {
+        this.observer && this.observer.unobserve(this.visibilityTarget.current);
+        delete this.observer;
+    }
+
+    visibilityChanged = (entries) => {
+        if (entries[0].isIntersecting) {
+            this.setState({ isVisible: true });
+            this.stopListeningForVisibility();
+        }
+    }
+}
\ No newline at end of file

From efb793d5eb33ec7700d22721168c85dc141adccd Mon Sep 17 00:00:00 2001
From: EugeneHlushko <jhlushko@gmail.com>
Date: Wed, 24 Apr 2019 20:21:15 +0300
Subject: [PATCH 2/2] speed(homepage) refactor approach to use existing package

---
 package.json                                  |  1 +
 src/components/Contributors/Contributors.jsx  | 27 ++++++++---
 src/components/Support/Support.jsx            | 28 ++++++++---
 .../VisibilitySensor/VisibilitySensor.jsx     | 47 -------------------
 yarn.lock                                     | 10 +++-
 5 files changed, 53 insertions(+), 60 deletions(-)
 delete mode 100644 src/components/VisibilitySensor/VisibilitySensor.jsx

diff --git a/package.json b/package.json
index d26cc22d66e0..c64528cdb2cb 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Contributors/Contributors.jsx b/src/components/Contributors/Contributors.jsx
index d02c5730c846..9f3ed0268001 100644
--- a/src/components/Contributors/Contributors.jsx
+++ b/src/components/Contributors/Contributors.jsx
@@ -1,11 +1,22 @@
 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) {
@@ -13,7 +24,11 @@ export default class Contributors extends VisibilitySensor {
     }
   
     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 => (
@@ -21,13 +36,13 @@ export default class Contributors extends VisibilitySensor {
                 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>
     );
   }
 }
diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index ebc7d558c65f..66c403dfafa8 100644
--- a/src/components/Support/Support.jsx
+++ b/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>
     );
   }
 
diff --git a/src/components/VisibilitySensor/VisibilitySensor.jsx b/src/components/VisibilitySensor/VisibilitySensor.jsx
deleted file mode 100644
index d00bc19727ad..000000000000
--- a/src/components/VisibilitySensor/VisibilitySensor.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-
-export default class VisibilitySensor extends React.Component {
-    state = {
-        isVisible: false
-    };
-
-    constructor(props) {
-        super(props);
-        this.visibilityTarget = React.createRef();
-    }
-
-    componentWillUnmount() {
-        this.stopListeningForVisibility();
-    }
-
-    componentDidMount () {
-        if (this.visibilityTarget.current) {
-            this.startListeningForVisibility();
-        }
-    }
-
-    startListeningForVisibility = () => {
-        if (typeof IntersectionObserver !== 'function') {
-            // fall back to rendering images
-            // browser doesnt support IntersectionObserver;
-            return this.setState({ isVisible: true });
-        }
-
-        this.observer = new IntersectionObserver(this.visibilityChanged, {
-            threshold: 0.05
-        });
-        this.observer.observe(this.visibilityTarget.current);
-    }
-
-    stopListeningForVisibility = () => {
-        this.observer && this.observer.unobserve(this.visibilityTarget.current);
-        delete this.observer;
-    }
-
-    visibilityChanged = (entries) => {
-        if (entries[0].isIntersecting) {
-            this.setState({ isVisible: true });
-            this.stopListeningForVisibility();
-        }
-    }
-}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index cca30558a596..6227bd71bc7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"