Better handling of initial state fetching (#9881)

- Wait for states properly
- Order of operations (await)

src/frontend/src/states/ApiState.tsx

@@ -11,7 +11,7 @@ import type { ServerAPIProps } from './states';
 interface ServerApiStateProps {
   server: ServerAPIProps;
   setServer: (newServer: ServerAPIProps) => void;
-  fetchServerApiState: () => void;
+  fetchServerApiState: () => Promise<void>;
   auth_config?: AuthConfig;
   auth_context?: AuthContext;
   setAuthContext: (auth_context: AuthContext) => void;

src/frontend/src/states/StatusState.tsx

@@ -14,7 +14,7 @@ export type StatusLookup = Record<ModelType | string, StatusCodeListInterface>;
 interface ServerStateProps {
   status?: StatusLookup;
   setStatus: (newStatus: StatusLookup) => void;
-  fetchStatus: () => void;
+  fetchStatus: () => Promise<void>;
 }
 
 export const useGlobalStatusState = create<ServerStateProps>()(

src/frontend/src/states/states.tsx

@@ -56,14 +56,19 @@ export async function fetchGlobalStates(
 
   setApiDefaults();
 
-  useServerApiState.getState().fetchServerApiState();
+  await useServerApiState.getState().fetchServerApiState();
   const result = await useUserSettingsState.getState().fetchSettings();
+
   if (!result && navigate) {
     console.log('MFA is required - setting up');
     // call mfa setup
     navigate('/mfa-setup');
+    return;
   }
-  useGlobalSettingsState.getState().fetchSettings();
-  useGlobalStatusState.getState().fetchStatus();
-  useIconState.getState().fetchIcons();
+
+  await Promise.all([
+    useGlobalSettingsState.getState().fetchSettings(),
+    useGlobalStatusState.getState().fetchStatus(),
+    useIconState.getState().fetchIcons()
+  ]);
 }