Fix: Load multiple chats during first startup (#1198)

### Motivation and Context

<!-- Thank you for your contribution to the chat-copilot repo!
Please help reviewers and future users, providing the following
information:
  1. Why is this change required?
  2. What problem does it solve?
  3. What scenario does it contribute to?
  4. If it fixes an open issue, please link to the issue here.
-->
When the application initially starts without any chat sessions in the
database, the app will attempt to create a new one. Currently, the app
will attempt multiple times without waiting for the initial attempt to
finish. This PR fixes the issue by introducing an intermediate state.

### Description

<!-- Describe your changes, the overall approach, the underlying design.
These notes will help understanding how your code works. Thanks! -->

### Contribution Checklist

<!-- Before submitting this PR, please make sure: -->

- [ ] The code builds clean without any errors or warnings
- [ ] The PR follows the [Contribution
Guidelines](https://github.com/microsoft/chat-copilot/blob/main/CONTRIBUTING.md)
and the [pre-submission formatting
script](https://github.com/microsoft/chat-copilot/blob/main/CONTRIBUTING.md#development-scripts)
raises no violations
- [ ] All unit tests pass, and I have added new tests where possible
- [ ] I didn't break anyone 😄

Author: TaoChenOSU

webapp/src/App.tsx

@@ -2,7 +2,7 @@ import { AuthenticatedTemplate, UnauthenticatedTemplate, useIsAuthenticated, use
 import { FluentProvider, Subtitle1, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 
 import * as React from 'react';
-import { useEffect, useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import Chat from './components/chat/Chat';
 import { Loading, Login } from './components/views';
 import { AuthHelper } from './libs/auth/AuthHelper';
@@ -49,6 +49,7 @@ export enum AppState {
     SettingUserInfo,
     ErrorLoadingChats,
     ErrorLoadingUserInfo,
+    LoadChats,
     LoadingChats,
     Chat,
     SigningOut,
@@ -98,16 +99,20 @@ const App = () => {
                     );
                 }
 
-                handleAppStateChange(AppState.LoadingChats);
+                handleAppStateChange(AppState.LoadChats);
             }
         }
 
-        if ((isAuthenticated || !AuthHelper.isAuthAAD()) && appState === AppState.LoadingChats) {
+        if ((isAuthenticated || !AuthHelper.isAuthAAD()) && appState === AppState.LoadChats) {
+            handleAppStateChange(AppState.LoadingChats);
             void Promise.all([
-                chat.loadChats()
-                    .then(() => { handleAppStateChange(AppState.Chat); })
+                chat
+                    .loadChats()
+                    .then(() => {
+                        handleAppStateChange(AppState.Chat);
+                    })
                     .catch((error) => {
-                        console.error("Error loading chats:", error);
+                        console.error('Error loading chats:', error);
                         handleAppStateChange(AppState.ErrorLoadingChats);
                     }),
                 file.getContentSafetyStatus(),
@@ -118,7 +123,6 @@ const App = () => {
                 }),
             ]);
         }
-
     }, [instance, isAuthenticated, appState, isMaintenance, handleAppStateChange, dispatch, chat, file]);
 
     const theme = features[FeatureKeys.DarkMode].enabled ? semanticKernelDarkTheme : semanticKernelLightTheme;

webapp/src/components/chat/Chat.tsx

@@ -21,7 +21,7 @@ const Chat = ({
                 ? // if AAD is enabled, we need to set the active account before loading chats
                   AppState.SettingUserInfo
                 : // otherwise, we can load chats immediately
-                  AppState.LoadingChats,
+                  AppState.LoadChats,
         );
     }, [setAppState]);
     return (