Disable call button while the call is connecting. (#3531)

* Disable call button while the call is connecting.

* cleanup

* fix

* Update src/room/LobbyView.tsx

Co-authored-by: Robin <[email protected]>

* fixup

* appease linter

---------

Co-authored-by: Robin <[email protected]>

Author: Half-Shot

src/room/GroupCallView.tsx

@@ -436,7 +436,7 @@ export const GroupCallView: FC<Props> = ({
         client={client}
         matrixInfo={matrixInfo}
         muteStates={muteStates}
-        onEnter={() => void enterRTCSessionOrError(rtcSession)}
+        onEnter={async () => enterRTCSessionOrError(rtcSession)}
         confineToRoom={confineToRoom}
         hideHeader={header === HeaderStyle.None}
         participantCount={participantCount}

src/room/LobbyView.tsx

@@ -57,7 +57,7 @@ interface Props {
   client: MatrixClient;
   matrixInfo: MatrixInfo;
   muteStates: MuteStates;
-  onEnter: () => void;
+  onEnter: () => Promise<void>;
   enterLabel?: JSX.Element | string;
   confineToRoom: boolean;
   hideHeader: boolean;
@@ -193,6 +193,14 @@ export const LobbyView: FC<Props> = ({
 
   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<Props> = ({
           >
             <Button
               className={classNames(styles.join, {
-                [styles.wait]: waitingForInvite,
+                [styles.wait]: waiting,
               })}
-              size={waitingForInvite ? "sm" : "lg"}
+              size={waiting ? "sm" : "lg"}
+              disabled={waiting}
               onClick={() => {
-                if (!waitingForInvite) onEnter();
+                if (!waiting) onEnterCall();
               }}
               data-testid="lobby_joinCall"
             >

src/room/RoomPage.tsx

@@ -151,7 +151,10 @@ export const RoomPage: FC = () => {
                   : E2eeType.NONE,
               },
             }}
-            onEnter={(): void => knock?.()}
+            onEnter={async (): Promise<void> => {
+              knock?.();
+              return Promise.resolve();
+            }}
             enterLabel={label}
             waitingForInvite={groupCallState.kind === "waitForInvite"}
             confineToRoom={confineToRoom}