Files
InvokeAI/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
Mary Hipp a456f6e6f0 lint
2024-01-02 10:02:33 -05:00

38 lines
918 B
TypeScript

import { Flex, Image, Spinner } from '@chakra-ui/react';
import InvokeAILogoNew from 'assets/images/invoke-key-wht-lrg.svg';
import InvokeAILogoImage from 'assets/images/logo.png';
import { memo } from 'react';
// This component loads before the theme so we cannot use theme tokens here
const Loading = ({ useNewLogo }: { useNewLogo: boolean }) => {
return (
<Flex
position="relative"
width="100vw"
height="100vh"
alignItems="center"
justifyContent="center"
bg="#151519"
>
<Image
src={useNewLogo ? InvokeAILogoNew : InvokeAILogoImage}
w="8rem"
h="8rem"
/>
<Spinner
label="Loading"
color="grey"
position="absolute"
size="sm"
width="24px !important"
height="24px !important"
right="1.5rem"
bottom="1.5rem"
/>
</Flex>
);
};
export default memo(Loading);