mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

fix loading component style [skip ci]

Browse Source
This commit is contained in:
checktheroads
2020-12-29 02:09:14 -07:00
parent 80af987034
commit d04a24ef6e
1 changed files with 19 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
hyperglass/ui/components/loading.tsx
View File

@@ -1,28 +1,24 @@
import { Flex, Spinner } from '@chakra-ui/react'; import { Flex, Spinner } from '@chakra-ui/react';
import { useColorValue } from '~/context';
import type { LoadableBaseOptions } from 'next/dynamic'; import type { LoadableBaseOptions } from 'next/dynamic';
export const Loading: LoadableBaseOptions['loading'] = () => { export const Loading: LoadableBaseOptions['loading'] = () => (
const bg = useColorValue('white', 'black'); <Flex flexDirection="column" minHeight="100vh" w="100%">
const color = useColorValue('black', 'white'); <Flex
return ( px={2}
<Flex flexDirection="column" minHeight="100vh" w="100%" bg={bg} color={color}> py={0}
<Flex w="100%"
px={2} bg="white"
py={0} color="black"
w="100%" flex="1 1 auto"
as="main" textAlign="center"
flexGrow={1} alignItems="center"
flexShrink={1} justifyContent="center"
flexBasis="auto" flexDirection="column"
textAlign="center" css={{
alignItems="center" '@media (prefers-color-scheme: dark)': { backgroundColor: 'black', color: 'white' },
justifyContent="start" }}>
flexDirection="column" <Spinner color="primary.500" w="6rem" h="6rem" />
mt={{ base: '50%', xl: '25%' }}>
<Spinner color="primary.500" w="6rem" h="6rem" />
</Flex>
</Flex> </Flex>
); </Flex>
}; );