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

packages/design-system/organisms/app-shell/AppShell.tsx

@@ -15,13 +15,35 @@ export type AppShellProps = {
   guilds?: GuildSlug[];
   recentGuilds?: string[];
   disableGuildPicker?: boolean;
+  skeleton?: boolean;
+};
+
+const OptionallyScroll = (props: {
+  shouldScroll: boolean;
+  children: React.ReactNode;
+}) => {
+  if (props.shouldScroll) {
+    return (
+      <Scrollbars
+        style={{ height: 'calc(100vh - 25px)', margin: 0, padding: 0 }}
+        autoHide
+        universal
+      >
+        {props.children}
+      </Scrollbars>
+    );
+  }
+
+  return <>{props.children}</>;
 };
 
 export const AppShell = (props: AppShellProps) => (
   <>
     <GlobalStyles />
     <GlobalStyleColors />
-    {props.user ? (
+    {props.skeleton ? (
+      <Masthead.Skeleton />
+    ) : props.user ? (
       <Masthead.Authed
         disableGuildPicker={props.disableGuildPicker}
         guilds={props.guilds || []}
@@ -32,13 +54,11 @@ export const AppShell = (props: AppShellProps) => (
     ) : (
       <Masthead.Guest />
     )}
-    <Scrollbars
-      style={{ height: 'calc(100vh - 25px)', margin: 0, padding: 0 }}
-      autoHide
-      universal
-    >
-      <Content small={props.small}>{props.children}</Content>
-      {props.showFooter && <Footer />}
-    </Scrollbars>
+    <OptionallyScroll shouldScroll={!props.skeleton}>
+      <>
+        <Content small={props.small}>{props.children}</Content>
+        {props.showFooter && <Footer />}
+      </>
+    </OptionallyScroll>
   </>
 );

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';