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

View file

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