Fix race condition of "not in chat" (#1652)

* Fix race condition of "not in chat"

* Add comments about fetchInitialData

Author: PorterNan

change/@internal-react-composites-e603a734-fe14-471f-9a7d-d452bcf95b9c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix race condition of \"not in chat\"",
+  "packageName": "@internal/react-composites",
+  "email": "jiangnanhello@live.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/ChatComposite/ChatScreen.tsx

@@ -121,6 +121,7 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
   const adapter = useAdapter();
 
   useEffect(() => {
+    // Initial data should be always fetched by the composite(or external caller) instead of the adapter
     adapter.fetchInitialData();
   }, [adapter]);
 

packages/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.ts

@@ -418,7 +418,6 @@ export const createAzureCommunicationChatAdapter = async ({
   await chatClient.startRealtimeNotifications();
 
   const adapter = await createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient);
-  await adapter.fetchInitialData();
 
   return adapter;
 };

packages/react-composites/tests/browser/chat/app/index.tsx

@@ -48,7 +48,11 @@ function App(): JSX.Element {
     }),
     []
   );
-  const adapter = useAzureCommunicationChatAdapter(args);
+  const adapter = useAzureCommunicationChatAdapter(args, async (adapter) => {
+    // fetch initial data before we render the component to avoid flaky test (time gap between header and participant list)
+    await adapter.fetchInitialData();
+    return adapter;
+  });
 
   React.useEffect(() => {
     if (adapter && uploadedFiles.length) {