Add LazyImage

package.json

@@ -23,6 +23,8 @@
     "sw-precache": "^5.2.0"
   },
   "dependencies": {
+    "@researchgate/react-intersection-observer": "^0.5.0",
+    "intersection-observer": "^0.5.0",
     "lodash": "^4.17.4",
     "netlify-identity-widget": "^1.2.0",
     "polished": "^1.7.0",

src/components/LazyImage.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { getImageSrc, getImageSrcset } from '../util/getImageUrl'
+import 'intersection-observer'
+import Observer from '@researchgate/react-intersection-observer'
+
+const Image = styled.img`
+  display: block;
+  width: 100%;
+  margin-bottom: 2.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`
+
+class LazyImage extends React.Component {
+  state = {
+    src: getImageSrc(this.props.src, '10'),
+    srcSet: '',
+    dataSrc: getImageSrc(this.props.src, '300'),
+    dataSrcSet: getImageSrcset(this.props.src)
+  }
+
+  handleIntersection = e => {
+    if (e.isIntersecting) {
+      this.setState({
+        src: this.state.dataSrc,
+        srcSet: this.state.dataSrcSet
+      })
+    }
+  }
+
+  render () {
+    const { sizes, alt, className } = this.props
+    const options = {
+      onChange: this.handleIntersection,
+      onlyOnce: true,
+      rootMargin: '0% 0% 50%'
+    }
+
+    return (
+      <Observer {...options}>
+        <Image
+          src={this.state.src}
+          srcSet={this.state.srcSet}
+          sizes={sizes || '100vw'}
+          alt={alt}
+          className={className}
+        />
+      </Observer>
+    )
+  }
+}
+
+LazyImage.propTypes = {
+  alt: PropTypes.string.isRequired
+}
+
+export default LazyImage

src/views/About.js

@@ -3,6 +3,7 @@ import Helmet from 'react-helmet'
 
 import Page from '../components/Page'
 import PageHeader from '../components/PageHeader'
+import LazyImage from '../components/LazyImage'
 import { Container, Section } from '../components/common'
 import Content from '../components/Content.js'
 
@@ -24,6 +25,8 @@ export default ({ page }) => (
     <Section thin>
       <Container>
         <Content source={page.section2} />
+        <p>The image below is a {'<LazyImage />'}</p>
+        <LazyImage src={page.featuredImage} alt='LazyImage' />
       </Container>
     </Section>
   </Page>

yarn.lock

@@ -54,6 +54,13 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@researchgate/react-intersection-observer@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@researchgate/react-intersection-observer/-/react-intersection-observer-0.5.0.tgz#c83341fe2d86467816373e9141c37b71b90798d9"
+  dependencies:
+    invariant "^2.2.2"
+    prop-types "^15.6.0"
+
 abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -3616,6 +3623,10 @@ interpret@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0"
 
+intersection-observer@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.5.0.tgz#9fe8bee3953c755b1485c38efd9633d535775ea6"
+
 invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"