v3/packages/design-system/molecules/user-avatar-group/UserAvatarGroupSkeleton.tsx
Katalina e0fcfc310e
feat: add skeleton masthead and generic loading page (#182)
* feat: add skeleton masthead and generic loading page

* add generic loader to picker page

* smooth out spinner, add no-motion state
2021-03-15 19:51:56 -04:00

17 lines
624 B
TypeScript

import { Avatar } from '@roleypoly/design-system/atoms/avatar';
import { palette } from '@roleypoly/design-system/atoms/colors';
import { PlaceholderBox } from '@roleypoly/design-system/atoms/placeholder';
import * as React from 'react';
import { Collapse, Group, GroupText } from './UserAvatarGroup.styled';
export const UserAvatarGroupSkeleton = () => (
<Group>
<Collapse preventCollapse={false}>
<GroupText>
<PlaceholderBox firstColor={palette.taupe200} secondColor={palette.taupe300} />
</GroupText>
&nbsp;
</Collapse>
<Avatar deliberatelyEmpty size={34}></Avatar>
</Group>
);