Lock in loaded images

src/element/LazyImage.js

@@ -1,11 +1,22 @@
+import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 export default function LazyImage(props) {
     const { ref, inView, entry } = useInView();
+    const [shown, setShown] = useState(false);
+
+    useEffect(() => {
+        setShown(s => {
+            if (!s && inView) {
+                return true;
+            }
+            return s;
+        })
+    }, [inView]);
 
     return (
         <div ref={ref}>
-            {inView ? <img {...props} /> : null}
+            {shown ? <img {...props} /> : null}
         </div>
     )
 }