LoadingShape = props => {
    const { className, style, shape, variant } = props;
    const shapeRef = useRef();
    const isImage = variant === 'image';
    const isAvatar = variant === 'avatar';

    useEffect(() => {
        const element = shapeRef.current;
        if (shape === 'square' || shape === 'circle') {
            element.style.width = `${element.offsetHeight}px`;
        } else {
            element.style.width = '100%';
        }
    });

    return (
        <StyledShapeContainer className={className} style={style}>
            <StyledLoadingShape shape={shape} variant={variant} ref={shapeRef}>
                <RenderIf isTrue={isImage}>
                    <StyledImageIcon shape={shape} />
                </RenderIf>
                <RenderIf isTrue={isAvatar}>
                    <StyledAvatarIcon shape={shape} />
                </RenderIf>
            </StyledLoadingShape>
        </StyledShapeContainer>
    );
}
LoadingShape can be used to display a placeholder where content
is being loaded asynchronously.