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

View file

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