mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Improve performance of photo load animation

This commit is contained in:
viktorstrate 2020-02-16 12:26:24 +01:00
parent a87e9fc56d
commit e7b2bc13d2
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ui/src/components/photoGallery/Photo.js
View File

@ -14,22 +14,25 @@ const PhotoContainer = styled.div`
position: relative;
`
const PhotoImg = photoProps => {
const StyledPhoto = styled(animated(ProtectedImage))`
height: 200px;
min-width: 100%;
position: relative;
object-fit: cover;
`
const StyledPhoto = styled(ProtectedImage)`
height: 200px;
min-width: 100%;
position: relative;
object-fit: cover;
opacity: ${props => (props.loaded ? 1 : 0)};
const [props, set, stop] = useSpring(() => ({ opacity: 0 }))
transition: opacity 300ms;
`
const PhotoImg = photoProps => {
const [loaded, setLoaded] = useState(false)
return (
<StyledPhoto
{...photoProps}
style={props}
loaded={loaded}
onLoad={() => {
set({ opacity: 1 })
setLoaded(true)
}}
/>
)