import React from 'react'; import { Stack } from 'soapbox/components/ui'; interface IPlaceholderAvatar { size: number withText?: boolean } /** Fake avatar to display while data is loading. */ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false }) => { const style = React.useMemo(() => { if (!size) { return {}; } return { width: `${size}px`, height: `${size}px`, }; }, [size]); return ( <Stack space={2} className='animate-pulse py-3 text-center'> <div className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800' style={style} /> {withText && ( <div style={{ width: size, height: 15 }} className='mx-auto rounded-full bg-primary-50 dark:bg-primary-800' /> )} </Stack> ); }; export default PlaceholderAvatar;