ui: commercial fixes (#3409)

minor commercial fixes

invokeai/frontend/web/src/app/components/App.tsx

@@ -30,9 +30,14 @@ const DEFAULT_CONFIG = {};
 interface Props {
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
+  setIsReady?: (isReady: boolean) => void;
 }
 
-const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
+const App = ({
+  config = DEFAULT_CONFIG,
+  headerComponent,
+  setIsReady,
+}: Props) => {
   useToastWatcher();
   useGlobalHotkeys();
 
@@ -61,6 +66,16 @@ const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
     setLoadingOverridden(true);
   }, []);
 
+  useEffect(() => {
+    if (isApplicationReady && setIsReady) {
+      setIsReady(true);
+    }
+
+    return () => {
+      setIsReady && setIsReady(false);
+    };
+  }, [isApplicationReady, setIsReady]);
+
   return (
     <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
       {isLightboxEnabled && <Lightbox />}

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -24,9 +24,16 @@ interface Props extends PropsWithChildren {
   token?: string;
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
+  setIsReady?: (isReady: boolean) => void;
 }
 
-const InvokeAIUI = ({ apiUrl, token, config, headerComponent }: Props) => {
+const InvokeAIUI = ({
+  apiUrl,
+  token,
+  config,
+  headerComponent,
+  setIsReady,
+}: Props) => {
   useEffect(() => {
     // configure API client token
     if (token) {
@@ -55,7 +62,11 @@ const InvokeAIUI = ({ apiUrl, token, config, headerComponent }: Props) => {
       <Provider store={store}>
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
-            <App config={config} headerComponent={headerComponent} />
+            <App
+              config={config}
+              headerComponent={headerComponent}
+              setIsReady={setIsReady}
+            />
           </ThemeLocaleProvider>
         </React.Suspense>
       </Provider>

invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx

@@ -17,8 +17,17 @@ const InvokeAILogoComponent = () => {
         h="32px"
         minW="32px"
         minH="32px"
+        userSelect="none"
       />
-      <Flex gap={3} display={{ base: 'inherit', sm: 'none', md: 'inherit' }}>
+      <Flex
+        gap={3}
+        display={{
+          base: 'inherit',
+          sm: 'none',
+          md: 'inherit',
+          userSelect = 'none',
+        }}
+      >
         <Text fontSize="xl">
           invoke <strong>ai</strong>
         </Text>