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