LazyLoadWrapper height is wrong

[ziimakc]

Why is that LazyLoadWrapper has height + 5px thats create unnecessary margin?

// height props is 100
function AvatarPlaceholder({ width, height }: { width: number; height: number }) {
  return (
    <AvatarPlaceholderStyled height={height} width={width}>
      123
    </AvatarPlaceholderStyled>
  )
}

const Avatar = forwardRef<HTMLImageElement, Props>(({ url, width, height, ...rest }, ref) => {
  return (
    <LazyLoad height={height} once offset={200} placeholder={<AvatarPlaceholder height={height} width={width} />}>
      <AvatarStyled src={url || 'https://img.webnovel.com/bookcover/12333953306291305/600/600.jpg'} {...rest} ref={ref} />
    </LazyLoad>
  )
})

const AvatarStyled = styled.img`
  object-fit: fill;
`
const AvatarPlaceholderStyled = styled.div<{ width: number; height: number }>`
  object-fit: fill;
  width: ${({ width }) => width}px;
  height: ${({ height }) => height}px;
`

[ameerthehacker]

@ZiiMakc can you share a minimal example in codesandbox

[ziimakc]

@ameerthehacker here it is: https://codesandbox.io/s/gracious-http-91cnz?file=/src/App.tsx

[himanshunegi378]

You will find your answer here https://stackoverflow.com/a/5804278