From a408f562d6f43939c2dd4117c8b09cdf6e0435e6 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Tue, 2 Jan 2024 09:42:54 -0500
Subject: [PATCH] option to use new brand for loader

---
 invokeai/frontend/web/src/app/components/InvokeAIUI.tsx  | 4 +++-
 .../web/src/assets/images/invoke-key-wht-lrg.svg         | 4 ++++
 .../web/src/common/components/Loading/Loading.tsx        | 9 +++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 invokeai/frontend/web/src/assets/images/invoke-key-wht-lrg.svg

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index e4ae4b61c6..94fb0dcae6 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -39,6 +39,7 @@ interface Props extends PropsWithChildren {
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
+  useNewLogo?: boolean;
 }
 
 const InvokeAIUI = ({
@@ -53,6 +54,7 @@ const InvokeAIUI = ({
   customStarUi,
   socketOptions,
   isDebugging = false,
+  useNewLogo = false,
 }: Props) => {
   useEffect(() => {
     // configure API client token
@@ -146,7 +148,7 @@ const InvokeAIUI = ({
   return (
     <React.StrictMode>
       <Provider store={store}>
-        <React.Suspense fallback={<Loading />}>
+        <React.Suspense fallback={<Loading useNewLogo={!!useNewLogo} />}>
           <ThemeLocaleProvider>
             <AppDndContext>
               <App config={config} selectedImage={selectedImage} />
diff --git a/invokeai/frontend/web/src/assets/images/invoke-key-wht-lrg.svg b/invokeai/frontend/web/src/assets/images/invoke-key-wht-lrg.svg
new file mode 100644
index 0000000000..91f210c82b
--- /dev/null
+++ b/invokeai/frontend/web/src/assets/images/invoke-key-wht-lrg.svg
@@ -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>
diff --git a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
index 591668f0c2..bbb605f92b 100644
--- a/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
+++ b/invokeai/frontend/web/src/common/components/Loading/Loading.tsx
@@ -1,10 +1,11 @@
 import { Flex, Image, Spinner } from '@chakra-ui/react';
 import InvokeAILogoImage from 'assets/images/logo.png';
+import InvokeAILogoNew from 'assets/images/invoke-key-wht-lrg.svg';
 import { memo } from 'react';
 
 // This component loads before the theme so we cannot use theme tokens here
 
-const Loading = () => {
+const Loading = ({ useNewLogo }: { useNewLogo: boolean }) => {
   return (
     <Flex
       position="relative"
@@ -14,7 +15,11 @@ const Loading = () => {
       justifyContent="center"
       bg="#151519"
     >
-      <Image src={InvokeAILogoImage} w="8rem" h="8rem" />
+      <Image
+        src={useNewLogo ? InvokeAILogoNew : InvokeAILogoImage}
+        w="8rem"
+        h="8rem"
+      />
       <Spinner
         label="Loading"
         color="grey"