mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-04-25 03:49:11 +00:00
Katalina
e0fcfc310e
* feat: add skeleton masthead and generic loading page * add generic loader to picker page * smooth out spinner, add no-motion state
28 lines
986 B
TypeScript
28 lines
986 B
TypeScript
import { DotOverlay } from '@roleypoly/design-system/atoms/dot-overlay';
|
|
import { Hero } from '@roleypoly/design-system/atoms/hero';
|
|
import { LoadingFill } from '@roleypoly/design-system/atoms/loading-text';
|
|
import { Space } from '@roleypoly/design-system/atoms/space';
|
|
import { Spinner } from '@roleypoly/design-system/atoms/spinner';
|
|
import { AppShell } from '@roleypoly/design-system/organisms/app-shell';
|
|
import styled from 'styled-components';
|
|
import { TextStyle } from './GenericLoading.styled';
|
|
|
|
const Center = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`;
|
|
|
|
export const GenericLoadingTemplate = (props: { children?: React.ReactNode }) => (
|
|
<AppShell skeleton>
|
|
<DotOverlay skeleton />
|
|
<Hero topSpacing={0} bottomSpacing={50}>
|
|
<Center>
|
|
<Spinner />
|
|
<Space />
|
|
<TextStyle>{props.children ? props.children : <LoadingFill />}</TextStyle>
|
|
</Center>
|
|
</Hero>
|
|
</AppShell>
|
|
);
|