communication-ui-library: @dmceachernmsft & @PorterNan We are using callback function to render or resolve display name issue but it will freeze browser. I have tested it with both hook method createAzureCommunicationCallAdapter & createTeamsCallWithChatAdapter.

@dmceachernmsft & @PorterNan We are using callback function to render or resolve display name issue but it will freeze browser. I have tested it with both hook method createAzureCommunicationCallAdapter & createTeamsCallWithChatAdapter.

My code is here:

import { AzureCommunicationTokenCredential } from "@azure/communication-common";
import {
  CallClientProvider,
  CallAgentProvider,
  CallProvider,
  CallComposite,
  createAzureCommunicationCallAdapter,
} from "@azure/communication-react";
import { CallScreen } from "./CallScreen";
import { endpoint } from "../authConfig";
import { Spinner } from "@fluentui/react/lib/Spinner";
import "./../styles/callScreen.css";
import { useSwitchableFluentTheme } from "./../theming/SwitchableFluentThemeProvider";

let updatedAdapter = true;

export const TestCallTeamsUserContent = ({
  teamTokens,
  meetingLink,
  endCall,
}) => {
  const [call, setCall] = useState("");
  const [callAdapter, setCallAdapter] = useState(null);
  const [callState, setCallState] = useState(false);
  const [statefulCallClient, setStatefulCallClient] = useState();
  const [callAgent, setCallAgent] = useState();
  const { currentTheme, currentRtl } = useSwitchableFluentTheme();

  const inCallUser = !![
    "Connecting",
    "Connected",
    "Disconnecting",
    "InLobby",
  ].includes(callState);

  useEffect(() => {
    if (
      teamTokens &&
      teamTokens?.acsToken !== "" &&
      teamTokens?.communicationUserId !== "" &&
      callAdapter === null &&
      updatedAdapter &&
      meetingLink !== ""
    ) {
      updatedAdapter = false;

      createAzureCommunicationCallAdapter({
        userId: { communicationUserId: teamTokens?.communicationUserId },
        //displayName: accounts[0].name,
        credential: new AzureCommunicationTokenCredential({
          refreshProactively: true,
          token: teamTokens?.acsToken,
          tokenRefresher: async () => {
            const refreshedToken = await getCommunicationTokenForTeamsUser();
            return refreshedToken.acsToken;
          },
        }),
        endpoint: endpoint,
        locator: { meetingLink: meetingLink },
      })
        .then((adapter) => {
          setCallAdapter(adapter);
          setStatefulCallClient(adapter.callClient);
          setCallAgent(adapter.callAgent);

          adapter.callAgent.on("callsUpdated", (e) => {
            e.added.forEach((c) => {
              setCall(c);
            });
          });
        })
        .catch((error) => console.log(error));
    }
  }, [teamTokens, callAdapter, meetingLink]);

  useEffect(() => {
    if (call) {
      call.on("stateChanged", () => {
        setCallState(call.state);
      });
    }
  }, [call]);

  useEffect(() => {
    const destroyCall = async () => {
      try {
        callAdapter && callAdapter?.dispose();
        setCallAdapter(null);
        setStatefulCallClient("");
        setCall("");
        setCallAgent("");
        updatedAdapter = true;
        endCall();
        window.parent.postMessage("CallIsTerminated", "*");
      } catch (error) {
        console.log(error);
        endCall();
        window.parent.postMessage("CallIsTerminated", "*");
      }
    };

    if (callState === "Disconnected") {
      destroyCall();
    }
  }, [callState]);

  if (callAdapter) {
    return (
      <div
        className="call-container"
        style={{ width: "100vw", height: "100vh" }}
      >
        {!inCallUser ? (
          <CallComposite
            adapter={callAdapter}
            fluentTheme={currentTheme.theme}
          />
        ) : (
          statefulCallClient && (
            <CallClientProvider callClient={statefulCallClient}>
              <CallAgentProvider callAgent={callAgent}>
                <CallProvider call={call}>
                  <CallScreen
                    meetingLink={meetingLink}
                    teamTokens={teamTokens}
                  />
                </CallProvider>
              </CallAgentProvider>
            </CallClientProvider>
          )
        )}
      </div>
    );
  } else {
    return (
      <>
        <div className="spinner-center">
          <Spinner label="Joining call..." />
        </div>
      </>
    );
  }
};

and, used dependencies are:

"dependencies": {
    "@azure/communication-calling": "^1.13.1",
    "@azure/communication-calling-effects": "^1.0.1",
    "@azure/communication-chat": "^1.3.1",
    "@azure/communication-common": "^2.2.0",
    "@azure/communication-react": "^1.5.1-beta.5",
    "@fluentui/react": "^8.110.2",
    "@fluentui/react-icons": "^2.0.203",
    "@microsoft/microsoft-graph-client": "^3.0.5",
    "axios": "^1.4.0",
    "bootstrap": "^4.5.3",
    "env-cmd": "^10.1.0",
    "react": "^17.0.1",
    "react-bootstrap": "^1.3.0",
    "react-dom": "^17.0.0",
    "react-icons": "^4.10.1",
    "react-use-websocket": "^4.3.1"
  },

Please review and share your views and also reopen this issue. Thanks

_Originally posted by @tayloramitverma in https://github.com/Azure/communication-ui-library/issues/3285#issuecomment-1631874885_