roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-16 09:39:09 +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

13
packages/design-system/organisms/masthead/Masthead.stories.tsx
View file

@ -2,15 +2,20 @@ import * as React from 'react';
import { guild, mastheadSlugs, user } from '../../fixtures/storyData';
import { Authed } from './Authed';
import { Guest } from './Guest';
import { Skeleton } from './Skeleton';
export default {
title: 'Organisms/Masthead',
};
export const HasGuilds = () => (
<Authed guilds={mastheadSlugs} activeGuildId={guild.id} user={user} />
export const hasGuilds = () => (
<Authed guilds={mastheadSlugs} activeGuildId={guild.id} user={user} recentGuilds={[]} />
);
export const NoGuilds = () => <Authed guilds={[]} activeGuildId={null} user={user} />;
export const noGuilds = () => (
<Authed guilds={[]} activeGuildId={null} user={user} recentGuilds={[]} />
);
export const Guest_ = () => <Guest />;
export const guest = () => <Guest />;
export const skeleton = () => <Skeleton />;

27
packages/design-system/organisms/masthead/Skeleton.tsx Normal file
View file

@ -0,0 +1,27 @@
import { Logotype } from '@roleypoly/design-system/atoms/branding';
import { palette } from '@roleypoly/design-system/atoms/colors';
import { UserAvatarGroupSkeleton } from '@roleypoly/design-system/molecules/user-avatar-group';
import {
MastheadAlignment,
MastheadBase,
MastheadLeft,
MastheadRight,
} from './Masthead.styled';
export const Skeleton = () => (
<MastheadBase>
<MastheadAlignment>
<MastheadLeft>
<Logotype
height={30}
circleFill={palette.taupe300}
circleOuterFill={palette.taupe200}
typeFill={palette.taupe300}
/>
</MastheadLeft>
<MastheadRight>
<UserAvatarGroupSkeleton />
</MastheadRight>
</MastheadAlignment>
</MastheadBase>
);

1
packages/design-system/organisms/masthead/index.ts
View file

@ -1,2 +1,3 @@
export * from './Authed';
export * from './Guest';
export * from './Skeleton';