From bc585ba9646ca06921f76212a12106532720a705 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Fri, 25 Aug 2023 13:34:25 -0400
Subject: [PATCH] dont render app until API is ready

---
 .../web/src/app/components/InvokeAIUI.tsx     | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 7e2ed7f571..884f7a4865 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -7,6 +7,7 @@ import React, {
   PropsWithChildren,
   ReactNode,
   useEffect,
+  useState,
 } from 'react';
 import { Provider } from 'react-redux';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
@@ -36,20 +37,19 @@ const InvokeAIUI = ({
   middleware,
   projectId,
 }: Props) => {
+  const [isReady, setIsReady] = useState(false);
   useEffect(() => {
-    // configure API client token
-    if (token) {
+    if (token && apiUrl && projectId) {
       $authToken.set(token);
-    }
-
-    // configure API client base url
-    if (apiUrl) {
       $baseUrl.set(apiUrl);
-    }
-
-    // configure API client project header
-    if (projectId) {
       $projectId.set(projectId);
+      setIsReady(true);
+    } else if (token && apiUrl) {
+      $authToken.set(token);
+      $baseUrl.set(apiUrl);
+      setIsReady(true);
+    } else {
+      setIsReady(true);
     }
 
     // reset dynamically added middlewares
@@ -81,7 +81,9 @@ const InvokeAIUI = ({
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
             <AppDndContext>
-              <App config={config} headerComponent={headerComponent} />
+              {isReady && (
+                <App config={config} headerComponent={headerComponent} />
+              )}
             </AppDndContext>
           </ThemeLocaleProvider>
         </React.Suspense>