diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 65c39ab48c..6a0c2ae917 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -5,11 +5,11 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { Skeleton } from 'flavours/glitch/components/skeleton'; import { counterRenderer } from 'flavours/glitch/components/common_counter'; import ShortNumber from 'flavours/glitch/components/short_number'; import classNames from 'classnames'; import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; +import { EmptyAccount } from 'flavours/glitch/components/empty_account'; import { me } from '../initial_state'; @@ -81,20 +81,7 @@ class Account extends ImmutablePureComponent { const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; if (!account) { - return ( - <div className={classNames('account', { 'account--minimal': minimal })}> - <div className='account__wrapper'> - <div className='account__display-name'> - <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div> - - <div> - <DisplayName /> - <Skeleton width='7ch' /> - </div> - </div> - </div> - </div> - ); + return <EmptyAccount size={size} minimal={minimal} />; } if (hidden) { diff --git a/app/javascript/flavours/glitch/components/empty_account.tsx b/app/javascript/flavours/glitch/components/empty_account.tsx new file mode 100644 index 0000000000..55322fb575 --- /dev/null +++ b/app/javascript/flavours/glitch/components/empty_account.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import classNames from 'classnames'; + +import { DisplayName } from 'flavours/glitch/components/display_name'; +import { Skeleton } from 'flavours/glitch/components/skeleton'; + +interface Props { + size?: number; + minimal?: boolean; +} + +export const EmptyAccount: React.FC<Props> = ({ + size = 46, + minimal = false, +}) => { + return ( + <div className={classNames('account', { 'account--minimal': minimal })}> + <div className='account__wrapper'> + <div className='account__display-name'> + <div className='account__avatar-wrapper'> + <Skeleton width={size} height={size} /> + </div> + + <div> + <DisplayName /> + <Skeleton width='7ch' /> + </div> + </div> + </div> + </div> + ); +};