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/web/src/pages/auth/login.tsx

@@ -1,12 +1,13 @@
 import { redirectTo } from '@reach/router';
 import { AuthLogin } from '@roleypoly/design-system/templates/auth-login';
+import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
 import { GuildSlug } from '@roleypoly/types';
 import React from 'react';
 import { useApiContext } from '../../contexts/api/ApiContext';
 import { useSessionContext } from '../../contexts/session/SessionContext';
 import { Title } from '../../utils/metaTitle';
 
-const Login = () => {
+const Login = (props: { path: string }) => {
   const { apiUrl, fetch } = useApiContext();
   const { isAuthenticated } = useSessionContext();
   // If ?r is in query, then let's render the slug page
@@ -46,7 +47,7 @@ const Login = () => {
   }, [apiUrl, fetch, isAuthenticated]);
 
   if (guildSlug === null) {
-    return <div>Loading...</div>;
+    return <GenericLoadingTemplate>Sending you to Discord...</GenericLoadingTemplate>;
   }
 
   return (

packages/web/src/pages/landing.tsx

@@ -5,7 +5,7 @@ import { useAppShellProps } from '../contexts/app-shell/AppShellContext';
 import { useSessionContext } from '../contexts/session/SessionContext';
 import { Title } from '../utils/metaTitle';
 
-const Landing = () => {
+const Landing = (props: { path: string }) => {
   const { isAuthenticated } = useSessionContext();
   const appShellProps = useAppShellProps();
 

packages/web/src/pages/machinery/logout.tsx

@@ -1,3 +1,4 @@
+import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
 import React from 'react';
 
 const Logout = () => {
@@ -7,7 +8,7 @@ const Logout = () => {
     window.location.href = '/';
   }, []);
 
-  return <div>Logging you out...</div>;
+  return <GenericLoadingTemplate>Logging you out...</GenericLoadingTemplate>;
 };
 
 export default Logout;

packages/web/src/pages/machinery/new-session.tsx

@@ -1,4 +1,6 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
 import { Link } from '@roleypoly/design-system/atoms/typography';
+import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
 import * as React from 'react';
 import { useSessionContext } from '../../contexts/session/SessionContext';
 import { Title } from '../../utils/metaTitle';
@@ -32,13 +34,15 @@ const NewSession = (props: { sessionID: string }) => {
   )(props.sessionID);
 
   return (
-    <>
+    <GenericLoadingTemplate>
       <Title title="Logging you into Roleypoly..." />
-      <div>Logging you into Roleypoly...</div>
-      <div>
-        <Link href={postauthUrl}>If you aren't redirected soon, click here.</Link>
+      <div style={{ textAlign: 'center' }}>
+        <div>Logging you into Roleypoly...</div>
+        <Link style={{ color: palette.taupe400 }} href={postauthUrl}>
+          If you aren't redirected soon, click here.
+        </Link>
       </div>
-    </>
+    </GenericLoadingTemplate>
   );
 };
 

packages/web/src/pages/picker.tsx

@@ -1,4 +1,5 @@
 import { Redirect } from '@reach/router';
+import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
 import { RolePickerTemplate } from '@roleypoly/design-system/templates/role-picker';
 import { ServerSetupTemplate } from '@roleypoly/design-system/templates/server-setup';
 import { PresentableGuild, RoleUpdate, UserGuildPermissions } from '@roleypoly/types';
@@ -48,7 +49,7 @@ const Picker = (props: PickerProps) => {
   }
 
   if (pickerData === null) {
-    return <div>Loading...</div>;
+    return <GenericLoadingTemplate />;
   }
 
   if (pickerData === false) {