feat: create progressive image loading

Author: jscodelover

public/image/header-bg-low.jpg

@@ -0,0 +1,34 @@
+import React, { useState, useRef } from "react";
+
+function ProgressiveImage(props){
+ const [highResImageLoaded, handlehighResImageLoaded] = useState(false);
+ const highResImage = useRef(null);
+
+ const overlayStyles = {
+ position: "absolute",
+ filter: "blur(1px)",
+ transition: "opacity ease-in 1000ms",
+ clipPath: "inset(0)"
+ }; 
+ const { overlaySrc, alt, src } = props;
+ return (
+ <span>
+ <img
+ onLoad={() => {
+ handlehighResImageLoaded(true)
+ }}
+ ref={highResImage}
+ src={src}
+ alt={alt}
+ />
+ <img
+ className={` ${overlayStyles}`}
+ {...highResImageLoaded && { style: { opacity: "0" } }}
+ src={overlaySrc}
+ alt={alt}
+ />
+ </span>
+ ); 
+}
+
+export default ProgressiveImage;

public/image/header-bg.jpg

@@ -3,7 +3,7 @@ import theme from '../../style/theme';
 
 const HeaderStyle = style.div`
  height: 80vh;
- background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
+ background: url("/image/header-bg.jpg") repeat;
  background-size: cover;
  background-position: bottom;
  position: relative;