option to use new brand for loader

This commit is contained in:
Mary Hipp 2024-01-02 09:42:54 -05:00 committed by Kent Keirsey
parent cefdf9ed00
commit a408f562d6
3 changed files with 14 additions and 3 deletions

View File

@ -39,6 +39,7 @@ interface Props extends PropsWithChildren {
customStarUi?: CustomStarUi; customStarUi?: CustomStarUi;
socketOptions?: Partial<ManagerOptions & SocketOptions>; socketOptions?: Partial<ManagerOptions & SocketOptions>;
isDebugging?: boolean; isDebugging?: boolean;
useNewLogo?: boolean;
} }
const InvokeAIUI = ({ const InvokeAIUI = ({
@ -53,6 +54,7 @@ const InvokeAIUI = ({
customStarUi, customStarUi,
socketOptions, socketOptions,
isDebugging = false, isDebugging = false,
useNewLogo = false,
}: Props) => { }: Props) => {
useEffect(() => { useEffect(() => {
// configure API client token // configure API client token
@ -146,7 +148,7 @@ const InvokeAIUI = ({
return ( return (
<React.StrictMode> <React.StrictMode>
<Provider store={store}> <Provider store={store}>
<React.Suspense fallback={<Loading />}> <React.Suspense fallback={<Loading useNewLogo={!!useNewLogo} />}>
<ThemeLocaleProvider> <ThemeLocaleProvider>
<AppDndContext> <AppDndContext>
<App config={config} selectedImage={selectedImage} /> <App config={config} selectedImage={selectedImage} />

View File

@ -0,0 +1,4 @@
<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="100" height="100" rx="6.66667" stroke="white" stroke-width="5"/>
<path d="M63.9137 36H83.1211V23H23.1211V36H42.3285L63.9137 70H83.1211V83H23.1211V70H42.3285" stroke="white" stroke-width="5"/>
</svg>

After

Width:  |  Height:  |  Size: 324 B

View File

@ -1,10 +1,11 @@
import { Flex, Image, Spinner } from '@chakra-ui/react'; import { Flex, Image, Spinner } from '@chakra-ui/react';
import InvokeAILogoImage from 'assets/images/logo.png'; import InvokeAILogoImage from 'assets/images/logo.png';
import InvokeAILogoNew from 'assets/images/invoke-key-wht-lrg.svg';
import { memo } from 'react'; import { memo } from 'react';
// This component loads before the theme so we cannot use theme tokens here // This component loads before the theme so we cannot use theme tokens here
const Loading = () => { const Loading = ({ useNewLogo }: { useNewLogo: boolean }) => {
return ( return (
<Flex <Flex
position="relative" position="relative"
@ -14,7 +15,11 @@ const Loading = () => {
justifyContent="center" justifyContent="center"
bg="#151519" bg="#151519"
> >
<Image src={InvokeAILogoImage} w="8rem" h="8rem" /> <Image
src={useNewLogo ? InvokeAILogoNew : InvokeAILogoImage}
w="8rem"
h="8rem"
/>
<Spinner <Spinner
label="Loading" label="Loading"
color="grey" color="grey"