roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-05-06 00:32:35 +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

38
packages/design-system/organisms/app-shell/AppShell.tsx
View file

@ -15,13 +15,35 @@ export type AppShellProps = {
guilds?: GuildSlug[];
recentGuilds?: string[];
disableGuildPicker?: boolean;
skeleton?: boolean;
};
const OptionallyScroll = (props: {
shouldScroll: boolean;
children: React.ReactNode;
}) => {
if (props.shouldScroll) {
return (
<Scrollbars
style={{ height: 'calc(100vh - 25px)', margin: 0, padding: 0 }}
autoHide
universal
>
{props.children}
</Scrollbars>
);
}
return <>{props.children}</>;
};
export const AppShell = (props: AppShellProps) => (
<>
<GlobalStyles />
<GlobalStyleColors />
{props.user ? (
{props.skeleton ? (
<Masthead.Skeleton />
) : props.user ? (
<Masthead.Authed
disableGuildPicker={props.disableGuildPicker}
guilds={props.guilds || []}
@ -32,13 +54,11 @@ export const AppShell = (props: AppShellProps) => (
) : (
<Masthead.Guest />
)}
<Scrollbars
style={{ height: 'calc(100vh - 25px)', margin: 0, padding: 0 }}
autoHide
universal
>
<Content small={props.small}>{props.children}</Content>
{props.showFooter && <Footer />}
</Scrollbars>
<OptionallyScroll shouldScroll={!props.skeleton}>
<>
<Content small={props.small}>{props.children}</Content>
{props.showFooter && <Footer />}
</>
</OptionallyScroll>
</>
);