fix(ui): wait for nav api to be ready before loading main app component

Author: psychedelicious

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

@@ -1,8 +1,11 @@
 import { Box } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { GlobalHookIsolator } from 'app/components/GlobalHookIsolator';
 import { GlobalModalIsolator } from 'app/components/GlobalModalIsolator';
 import { clearStorage } from 'app/store/enhancers/reduxRemember/driver';
+import Loading from 'common/components/Loading/Loading';
 import { AppContent } from 'features/ui/components/AppContent';
+import { navigationApi } from 'features/ui/layouts/navigation-api';
 import { memo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -16,11 +19,12 @@ const errorBoundaryOnReset = () => {
 };
 
 const App = () => {
+  const isNavigationAPIConnected = useStore(navigationApi.$isConnected);
   return (
     <ThemeLocaleProvider>
       <ErrorBoundary onReset={errorBoundaryOnReset} FallbackComponent={AppErrorBoundaryFallback}>
         <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
-          <AppContent />
+          {isNavigationAPIConnected ? <AppContent /> : <Loading />}
         </Box>
         <GlobalHookIsolator />
         <GlobalModalIsolator />

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

@@ -34,14 +34,14 @@ export const GlobalHookIsolator = memo(() => {
   const dispatch = useAppDispatch();
 
   // singleton!
+  useNavigationApi();
   useReadinessWatcher();
   useSocketIO();
   useGlobalModifiersInit();
   useGlobalHotkeys();
   useGetOpenAPISchemaQuery();
   useSyncLoggingConfig();
   useCloseChakraTooltipsOnDragFix();
-  useNavigationApi();
   useDndMonitor();
   useSyncNodeErrors();
   useSyncLangDirection();