bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extend PlaceholderAvatar component to support "withText" prop

Browse source
This commit is contained in:
Justin 2022-06-22 08:57:22 -04:00
parent 5884d02e9d
commit 8039772d05
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/soapbox/features/placeholder/components/placeholder_avatar.tsx
View file

@ -1,11 +1,14 @@
import * as React from 'react'; import * as React from 'react';
import { Stack } from 'soapbox/components/ui';
interface IPlaceholderAvatar { interface IPlaceholderAvatar {
size: number, size: number
withText?: boolean
} }
/** Fake avatar to display while data is loading. */ /** Fake avatar to display while data is loading. */
const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size }) => { const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false }) => {
const style = React.useMemo(() => { const style = React.useMemo(() => {
if (!size) { if (!size) {
return {}; return {};
@ -18,10 +21,16 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size }) => {
}, [size]); }, [size]);
return ( return (
<div <Stack space={3} className='animate-pulse text-center'>
className='rounded-full bg-slate-200 dark:bg-slate-700' <div
style={style} className='block mx-auto rounded-full bg-slate-200 dark:bg-slate-700'
/> style={style}
/>
{withText && (
<div style={{ width: size, height: 20 }} className='rounded-full bg-slate-200 dark:bg-slate-700' />
)}
</Stack>
); );
}; };