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/app-router/AppRouter.tsx

@@ -1,11 +1,12 @@
 import { Router } from '@reach/router';
+import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
 import * as React from 'react';
+import AuthLogin from '../pages/auth/login';
+import LandingPage from '../pages/landing';
 
-const LandingPage = React.lazy(() => import('../pages/landing'));
 const ServersPage = React.lazy(() => import('../pages/servers'));
 const PickerPage = React.lazy(() => import('../pages/picker'));
 
-const AuthLogin = React.lazy(() => import('../pages/auth/login'));
 const MachineryNewSession = React.lazy(() => import('../pages/machinery/new-session'));
 const MachineryLogout = React.lazy(() => import('../pages/machinery/logout'));
 const MachineryBotJoin = React.lazy(() => import('../pages/machinery/bot-join'));
@@ -18,7 +19,7 @@ const RouteWrapper = (props: {
   path?: string;
   default?: boolean;
 }) => (
-  <React.Suspense fallback={<div>Loading...</div>}>
+  <React.Suspense fallback={<GenericLoadingTemplate />}>
     <props.component {...props} />
   </React.Suspense>
 );
@@ -26,7 +27,7 @@ const RouteWrapper = (props: {
 export const AppRouter = () => {
   return (
     <Router>
-      <RouteWrapper component={LandingPage} path="/" />
+      <LandingPage path="/" />
       <RouteWrapper component={ServersPage} path="/servers" />
       <RouteWrapper component={PickerPage} path="/s/:serverID" />
 
@@ -37,7 +38,7 @@ export const AppRouter = () => {
       <RouteWrapper component={MachineryLogout} path="/machinery/logout" />
       <RouteWrapper component={MachineryBotJoin} path="/machinery/bot-join" />
       <RouteWrapper component={MachineryBotJoin} path="/machinery/bot-join/:serverID" />
-      <RouteWrapper component={AuthLogin} path="/auth/login" />
+      <AuthLogin path="/auth/login" />
 
       <RouteWrapper component={DevToolsSetApi} path="/x/dev-tools/set-api" />
       <RouteWrapper component={DevToolsSessionDebug} path="/x/dev-tools/session-debug" />

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) {