feat: add skeleton masthead and generic loading page

packages/design-system/organisms/masthead/Masthead.stories.tsx

@@ -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 />;

packages/design-system/organisms/masthead/Skeleton.tsx

@@ -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>
+);

packages/design-system/organisms/masthead/index.ts

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