roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-15 17:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add skeleton masthead and generic loading page (#182)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

7
packages/design-system/templates/generic-loading/GenericLoading.stories.tsx Normal file
View file

@ -0,0 +1,7 @@
import { GenericLoadingTemplate } from './GenericLoading';
export default {
title: 'Templates/Generic Loading',
component: GenericLoadingTemplate,
};
export const genericLoading = (args) => <GenericLoadingTemplate {...args} />;

6
packages/design-system/templates/generic-loading/GenericLoading.styled.ts Normal file
View file

@ -0,0 +1,6 @@
import { palette } from '@roleypoly/design-system/atoms/colors';
import styled from 'styled-components';
export const TextStyle = styled.div`
color: ${palette.taupe500};
`;

28
packages/design-system/templates/generic-loading/GenericLoading.tsx Normal file
View file

@ -0,0 +1,28 @@
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>
);

1
packages/design-system/templates/generic-loading/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './GenericLoading';