speed(homepage) offload images until in viewport (#2956)

* speed(homepage) offload images until in viewport

* 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,25 +1,48 @@
 import React from 'react';
+import { InView } from 'react-intersection-observer';
+import SmallIcon from '../../assets/icon-square-small-slack.png';
 import './Contributors.scss';
 
-export default ({contributors}) => {
-  if (!contributors.length) {
-    return <noscript />;
+export default class Contributors extends React.Component {
+  state = {
+    inView: false
   }
 
-  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>
-          ))
-        }
-      </div>
-    </div>
-  );
-};
+  handleInView = (inView) => {
+    if (!inView) {
+      return;
+    }
+    this.setState({ inView });
+  }
+
+  render() {
+    const { inView } = this.state;
+    const { contributors } = this.props;
+    
+    if (!contributors.length) {
+      return <noscript />;
+    }
+  
+    return (
+      <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={ inView ? `https://github.com/${contributor}.png?size=90` : SmallIcon } />
+                <span className="contributor__name"> {contributor}</span>
+              </a>
+            ))
+          }
+        </div>
+      </InView>
+    );
+  }
+}

src/components/Support/Support.jsx

@@ -1,5 +1,6 @@
 // Import External Dependencies
 import React from 'react';
+import { InView } from 'react-intersection-observer';
 
 // Import Data
 import Backers from './_supporters.json';
@@ -62,9 +63,22 @@ function formatMoney(number) {
 }
 
 export default class Support extends React.Component {
+  state = {
+    inView: false
+  }
+
+  handleInView = (inView) => {
+    if (!inView) {
+      return;
+    }
+    this.setState({ inView });
+  };
+
   render() {
     let { rank } = this.props;
 
+    const { inView } = this.state;
+
     let supporters = SUPPORTERS;
     let minimum, maximum, maxAge, limit, random;
 
@@ -108,7 +122,11 @@ export default class Support extends React.Component {
     }
 
     return (
-      <div className="support">
+      <InView as="div"
+        onChange={ this.handleInView }
+        threshold={ 0 }
+        triggerOnce
+        className="support">
         <div className="support__description">
           { rank === 'backer' ? (
             <p>
@@ -134,7 +152,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={ (inView && supporter.avatar) ? supporter.avatar : SmallIcon }
                 alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' }
                 onError={ this._handleImgError } />}
             </a>
@@ -146,7 +164,7 @@ export default class Support extends React.Component {
             Become a { rank === 'backer' ? 'backer' : 'sponsor' }
           </a>
         </div>
-      </div>
+      </InView>
     );
   }
 

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"