WIP: progressive + lazy image

package.json

@@ -40,12 +40,14 @@
     "lru-cache": "^4.1.3",
     "polished": "^2.3.3",
     "prop-types": "^15.6.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.8.0-alpha.1",
+    "react-dom": "^16.8.0-alpha.1",
     "react-helmet": "^5.2.0",
+    "react-progressive-image": "^0.6.0",
     "react-window-size": "^1.2.0",
     "recompose": "^0.30.0",
     "styled-components": "^3.4.8",
+    "the-platform": "^0.9.0-1",
     "timesince": "^0.1.0-alpha.0",
     "unist-util-visit": "^1.4.0"
   },

src/components/Image/Progressive.js

@@ -0,0 +1,73 @@
+import React, { useRef, useState, useEffect } from 'react'
+import ProgressiveImage from 'react-progressive-image'
+import { useIntersectionObserver } from 'the-platform'
+
+const WIDTHS = [320, 480, 800, 1024, 1280, 1440, 1920]
+
+const baseStyle = {
+	position: 'absolute',
+	top: 0,
+	left: 0,
+	width: '100%',
+	height: '100%',
+	objectFit: 'cover',
+	objectPosition: 'center',
+	transition: '0.5s all',
+}
+
+// const EMPTY_SVG = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>'
+const placeholderSettings = '/-/scale_crop/24x24/-/quality/lightest/'
+const getPlaceholder = ({src}) => {
+	// if(!inView) return EMPTY_SVG
+	if(!src || typeof src !== 'string') return 'none'
+	if(!src.includes('ucarecdn.com')) return src
+	return (src + '/').replace(/\/+$/, placeholderSettings)
+}
+
+const generateSrcSet = (base, sizes) => (
+	sizes.map(size => (`
+		${base}/-/resize/${size}x/-/quality/lighter/ ${size}w,
+		${base}/-/resize/${size*2}x/-/quality/lightest/ ${size*2}w,
+	`
+	)).join('')
+)
+
+const getSrcSet = (src, sizes) => {
+	if(!src || typeof src !== 'string') return 'none'
+	if(!src.includes('ucarecdn.com')) return 'none'
+	const clean = (src + '/').replace(/\/+$/, '')
+	return generateSrcSet(clean, sizes)
+}
+
+const generateSizes = sizes => {
+	const withRetina = sizes.map(x => [x, x*2]).flat()
+	return withRetina.slice(0,-1).map(size => `(max-width: ${size}px) ${size-40}px, `).join('')+`${withRetina.slice(-1)[0]}px`
+}
+
+const Progressive = ({src, style = {}}) => {
+	const targetRef = useRef(null);
+	const [hasIntersected, setIntersected] = useState(false)
+	const isIntersecting = useIntersectionObserver(targetRef, typeof document === 'object' ? document.body : targetRef)
+
+	useEffect(() => {isIntersecting && !hasIntersected && setIntersected(true)}, [isIntersecting])
+
+
+	if(!hasIntersected) return (
+		<img ref={targetRef} src={getPlaceholder({src})} style={{...baseStyle, ...style, filter: 'blur(4vw)'}}/>
+	)
+
+	return (
+		<ProgressiveImage ref={targetRef} src={src} placeholder={getPlaceholder({src})}>
+			{(src, loading) => (
+				<img
+					src={src}
+					srcSet={!loading ? getSrcSet(src, WIDTHS) : 'none'}
+					sizes={!loading ? generateSizes(WIDTHS) : 'none'}
+					style={{...baseStyle, ...style, filter: loading ? 'blur(4vw)' : 'none'}}
+				/>
+			)}
+		</ProgressiveImage>
+	)
+}
+
+export default Progressive

src/components/Image/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Progressive from './Progressive'
 
 const NullComponent = () => null
 
@@ -7,33 +8,20 @@ const parseSource = src => {
 	return [null, NullComponent]
 }
 
-const Img = React.forwardRef(({fixed, fluid, className, style, ...props}, ref) => {
+const Img = ({fixed, fluid, className, style, ...props}) => {
 	const divStyle = (
-		fluid && {position: 'relative', overflow: 'hidden', ...style} ||
-		fixed && {position: 'relative', overflow: 'hidden', display: 'inline-block', ...style}
+		fluid && {position: 'relative', ...style} ||
+		fixed && {position: 'relative', display: 'inline-block', ...style}
 	) || {}
 	const divClassName = `${className ? className : ``} gatsby-image-wrapper`
 	return (
-		<div className={divClassName} style={divStyle}>
+		<div className={divClassName} style={{overflow: 'hidden', ...divStyle}}>
 			<picture>
-				<img
-					{...props}
-					ref={ref}
-					style={{
-						position: 'absolute',
-						top: 0,
-						left: 0,
-						width: '100%',
-						height: '100%',
-						objectFit: 'cover',
-						objectPosition: 'center',
-						...style,
-					}}
-				/>
+				<Progressive {...props} style={style}/>
 			</picture>
 		</div>
 	)
-})
+}
 
 const Image = ({src, ...props} = {}) => {
 	const [source, Component] = parseSource(src)