forked from Archives/Athou_commafeed
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
|
import { Center, Container, RingProgress, Text, Title, useMantineTheme } from "@mantine/core"
|
||
|
|
import { Logo } from "components/Logo"
|
||
|
|
import { useAppLoading } from "hooks/useAppLoading"
|
||
|
|
|
||
|
|
export function LoadingPage() {
|
||
|
|
const theme = useMantineTheme()
|
||
|
|
const { loadingPercentage, loadingStepLabel } = useAppLoading()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container size="xs">
|
||
|
|
<Center my="xl">
|
||
|
|
<Logo size={48} />
|
||
|
|
<Title order={1} ml="md">
|
||
|
|
CommaFeed
|
||
|
|
</Title>
|
||
|
|
</Center>
|
||
|
|
|
||
|
|
<Center>
|
||
|
|
<RingProgress
|
||
|
|
sections={[{ value: loadingPercentage, color: theme.primaryColor }]}
|
||
|
|
label={
|
||
|
|
<Text weight="bold" align="center" size="xl">
|
||
|
|
{loadingPercentage}%
|
||
|
|
</Text>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</Center>
|
||
|
|
|
||
|
|
{loadingStepLabel && <Center>{loadingStepLabel}</Center>}
|
||
|
|
</Container>
|
||
|
|
)
|
||
|
|
}
|