diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index e4a6a997..248ce2dc 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -436,7 +436,7 @@ export const GroupCallView: FC = ({ client={client} matrixInfo={matrixInfo} muteStates={muteStates} - onEnter={() => void enterRTCSessionOrError(rtcSession)} + onEnter={async () => enterRTCSessionOrError(rtcSession)} confineToRoom={confineToRoom} hideHeader={header === HeaderStyle.None} participantCount={participantCount} diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index 391cb391..625a61b3 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -57,7 +57,7 @@ interface Props { client: MatrixClient; matrixInfo: MatrixInfo; muteStates: MuteStates; - onEnter: () => void; + onEnter: () => Promise; enterLabel?: JSX.Element | string; confineToRoom: boolean; hideHeader: boolean; @@ -193,6 +193,14 @@ export const LobbyView: FC = ({ useTrackProcessorSync(videoTrack); + const [waitingToEnter, setWaitingToEnter] = useState(false); + const onEnterCall = useCallback(() => { + setWaitingToEnter(true); + void onEnter().finally(() => setWaitingToEnter(false)); + }, [onEnter]); + + const waiting = waitingForInvite || waitingToEnter; + // TODO: Unify this component with InCallView, so we can get slick joining // animations and don't have to feel bad about reusing its CSS return ( @@ -222,11 +230,12 @@ export const LobbyView: FC = ({ >