Storybook messages loading issue fix (#2784)

Author: vhuseinova-msft

change-beta/@azure-communication-react-9201c23e-f043-4604-afff-8ef93cfbae8d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix messages thread loading issue when an adapter is updated",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-9201c23e-f043-4604-afff-8ef93cfbae8d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix messages thread loading issue when an adapter is updated",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/MessageThread.tsx

@@ -753,6 +753,13 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
   const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = useState<number | undefined>(undefined);
 
   const isAllChatMessagesLoadedRef = useRef(false);
+  // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
+  // onLoadPreviousChatMessages is updated when a new adapter is set
+  useEffect(() => {
+    if (onLoadPreviousChatMessages) {
+      isAllChatMessagesLoadedRef.current = false;
+    }
+  }, [onLoadPreviousChatMessages]);
 
   const previousTopRef = useRef<number>(-1);
   const previousHeightRef = useRef<number>(-1);
@@ -851,16 +858,20 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
     if (!isLoadingChatMessagesRef.current) {
       if (onLoadPreviousChatMessages) {
         isLoadingChatMessagesRef.current = true;
-        // Fetch message until scrollTop reach the threshold for fetching new message
-        while (
-          !isAllChatMessagesLoadedRef.current &&
-          chatScrollDivRef.current &&
-          chatScrollDivRef.current.scrollTop <= 500
-        ) {
-          isAllChatMessagesLoadedRef.current = await onLoadPreviousChatMessages(numberOfChatMessagesToReload);
-          await delay(200);
+        try {
+          // Fetch message until scrollTop reach the threshold for fetching new message
+          while (
+            !isAllChatMessagesLoadedRef.current &&
+            chatScrollDivRef.current &&
+            chatScrollDivRef.current.scrollTop <= 500
+          ) {
+            isAllChatMessagesLoadedRef.current = await onLoadPreviousChatMessages(numberOfChatMessagesToReload);
+            await delay(200);
+          }
+        } finally {
+          // Set isLoadingChatMessagesRef to false after messages are fetched
+          isLoadingChatMessagesRef.current = false;
         }
-        isLoadingChatMessagesRef.current = false;
       }
     }
   }, [numberOfChatMessagesToReload, onLoadPreviousChatMessages]);

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

@@ -127,7 +127,13 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
 
   useEffect(() => {
     // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-    adapter.fetchInitialData();
+    const fetchData: () => Promise<void> = async () => {
+      // Fetch initial data for adapter
+      await adapter.fetchInitialData();
+      // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
+      await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);
+    };
+    fetchData();
   }, [adapter]);
 
   const messageThreadProps = usePropsFor(MessageThread);

packages/storybook/stories/ChatComposite/snippets/Container.snippet.tsx

@@ -6,7 +6,7 @@ import {
   useAzureCommunicationChatAdapter
 } from '@azure/communication-react';
 import { PartialTheme, Theme } from '@fluentui/react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 
 export type ContainerProps = {
   /** UserIdentifier is of type CommunicationUserIdentifier see below how to construct it from a string input */
@@ -38,10 +38,19 @@ export const ContosoChatContainer = (props: ContainerProps): JSX.Element => {
     [props.userIdentifier]
   );
 
+  // Add throttling for setting display name during typing
+  const [displayName, setDisplayName] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDisplayName(props.displayName);
+    }, 500);
+    return () => clearTimeout(handle);
+  }, [props.displayName]);
+
   const adapter = useAzureCommunicationChatAdapter({
     endpoint: props.endpointUrl,
     userId,
-    displayName: props.displayName,
+    displayName,
     credential,
     threadId: props.threadId
   });