roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-15 17:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add skeleton masthead and generic loading page (#182)

Browse source 
* feat: add skeleton masthead and generic loading page

* add generic loader to picker page

* smooth out spinner, add no-motion state
This commit is contained in:
41666 2021-03-15 19:51:56 -04:00 • committed by GitHub
parent fa85b30cf0
commit e0fcfc310e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 380 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

7
packages/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
View file

@ -2,6 +2,7 @@ import { Hero } from '@roleypoly/design-system/atoms/hero';
import * as React from 'react';
import { user } from '../../fixtures/storyData';
import { UserAvatarGroup } from './UserAvatarGroup';
import { UserAvatarGroupSkeleton } from './UserAvatarGroupSkeleton';
export default {
title: 'Molecules/User Avatar Group',
@ -17,3 +18,9 @@ export const Default = (args) => (
<UserAvatarGroup {...args} />
</Hero>
);
export const skeleton = () => (
<Hero>
<UserAvatarGroupSkeleton />
</Hero>
);

17
packages/design-system/molecules/user-avatar-group/UserAvatarGroupSkeleton.tsx Normal file
View file

@ -0,0 +1,17 @@
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>
);

1
packages/design-system/molecules/user-avatar-group/index.ts
View file

@ -1 +1,2 @@
export * from './UserAvatarGroup';
export * from './UserAvatarGroupSkeleton';