import { useSetContentIsLoaded } from 'contexts/shimmer/ShimmerContext' ; import styled from 'styled-components' ; type ContentWidthType = 'fullWidth' | 'maxWidth' ; type ContentHeightType = 'maxHeightScreen' ; type Props = { className ? : string ; src : string ; alt : string ; widthType ? : ContentWidthType ; heightType ? : ContentHeightType ; } ; export default function ImageWithLoading ( { className , widthType = 'fullWidth' , heightType , src , alt , } ) { const setContentIsLoaded = useSetContentIsLoaded ( ) ; return ( < StyledImg className = { className } widthType = { widthType } heightType = { heightType } src = { src } alt = { alt } loading = "lazy" onLoad = { setContentIsLoaded } / > ) ; } type StyledImgProps = { widthType : ContentWidthType ; heightType ? : ContentHeightType ; } ; const StyledImg = styled . img < StyledImgProps > `
  display: block;
  ${ ( { widthType } ) => ( widthType === 'fullWidth' ? 'width' : 'max-width' ) }: 100%;
  max-height: ${ ( { heightType } ) => ( heightType === 'maxHeightScreen' ? '80vh' : '100%' ) };
` ;