File size: 1,304 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import React from "react";
import { Center, Stack, Text } from "@mantine/core";
import styled, { keyframes } from "styled-components";
import { JSONCrackLogo } from "../JsonCrackLogo";
interface LoadingProps {
loading?: boolean;
message?: string;
}
const fadeIn = keyframes`
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
`;
const StyledLoading = styled.div<{ $visible: boolean }>`
display: ${({ $visible }) => ($visible ? "grid" : "none")};
position: fixed;
top: 0;
left: 0;
place-content: center;
width: 100%;
height: 100vh;
text-align: center;
z-index: 100;
pointer-events: visiblePainted;
animation: 200ms ${fadeIn};
animation-fill-mode: forwards;
visibility: hidden;
background: ${({ theme }) => theme.BACKGROUND_NODE};
opacity: 0.8;
color: ${({ theme }) => theme.INTERACTIVE_HOVER};
cursor: wait;
img {
transform: rotate(45deg);
}
`;
export const Loading = ({ loading = false, message }: LoadingProps) => {
return (
<Center mx="auto">
<StyledLoading $visible={loading}>
<Stack>
<JSONCrackLogo fontSize="3rem" />
<Text fz="lg" fw="bold">
{message ?? "Preparing the environment for you..."}
</Text>
</Stack>
</StyledLoading>
</Center>
);
};
|