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';
|
import { useInView } from 'react-intersection-observer';
|
||||||
|
|
||||||
export default function LazyImage(props) {
|
export default function LazyImage(props) {
|
||||||
const { ref, inView, entry } = useInView();
|
const { ref, inView, entry } = useInView();
|
||||||
|
const [shown, setShown] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setShown(s => {
|
||||||
|
if (!s && inView) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
})
|
||||||
|
}, [inView]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={ref}>
|
<div ref={ref}>
|
||||||
{inView ? <img {...props} /> : null}
|
{shown ? <img {...props} /> : null}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user