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

@@ -115,6 +115,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/tests/browser/chat/app/index.tsx

@@ -39,7 +39,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;
+  });
 
   return (
     <>