Display costume tile

showCostumeTile.js

const { SlimContent } = RaiselyComponents.Loading;
const { ProfileImage, ProgressBar } = RaiselyComponents.Atoms;

return (
    <React.Fragment>
        {props.header}
        <div className={`profile-tile profile-tile--detail-${detail}`}>
            <ProfileImage
                defaultImage={defaultImage}
                profile={profile}
            />
            <div className="profile-tile__content">
                {props.showAsLoading && (
                    <SlimContent
                        longer
                        style={{ height: '2.8rem', width: '100%' }}
                    />
                )}
                {!props.showAsLoading && (
                    <React.Fragment>
                        <p className="profile-tile__name">{profile.name}</p>
                        <span className="profile-tile__total">
                            {total}
                        </span>
                        <ProgressBar
                            profile={profile}
                            displaySource="custom"
                            total={total}
                            goal={goal}
                            showTotal={false}
                            showGoal={false}
                            size="small"
                            style="rounded"
                        />
                        <div className="profile-tile__rank">
                            {profile.rank}
                        </div>
                    </React.Fragment>
                )}
            </div>
        </div>
    </React.Fragment>
);