forked from Kieran/snort
Lock in loaded images
This commit is contained in:
parent
a6cb8a8a8c
commit
07fc595f46
@ -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>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user