Improve connecting overlay (#334)

mattermost · Feb 15, 2023 · ad98e2b · ad98e2b
1 parent 82adc99
commit ad98e2b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/webapp/src/client.ts b/webapp/src/client.ts
@@ -37,6 +37,7 @@ export default class CallsClient extends EventEmitter {
     private readonly onDeviceChange: () => void;
     private readonly onBeforeUnload: () => void;
     private closed = false;
+    private connected = false;
     public initTime = Date.now();
 
     constructor(config: CallsClientConfig) {
@@ -266,6 +267,7 @@ export default class CallsClient extends EventEmitter {
             peer.on('connect', () => {
                 logDebug('rtc connected');
                 this.emit('connect');
+                this.connected = true;
             });
 
             peer.on('close', () => {
@@ -589,4 +591,8 @@ export default class CallsClient extends EventEmitter {
     public getAudioDevices() {
         return this.audioDevices;
     }
+
+    public isConnecting() {
+        return !this.connected && !this.closed;
+    }
 }
diff --git a/webapp/src/components/call_widget/component.tsx b/webapp/src/components/call_widget/component.tsx
@@ -113,7 +113,7 @@ interface State {
     audioEls: HTMLAudioElement[],
     alerts: CallAlertStates,
     recDisclaimerDismissedAt: number,
-    connected: boolean,
+    connecting: boolean,
 }
 
 export default class CallWidget extends React.PureComponent<Props, State> {
@@ -261,7 +261,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
             audioEls: [],
             alerts: CallAlertStatesDefault,
             recDisclaimerDismissedAt: 0,
-            connected: false,
+            connecting: true,
         };
         this.node = React.createRef();
         this.menuNode = React.createRef();
@@ -316,6 +316,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
         // eslint-disable-next-line react/no-did-mount-set-state
         this.setState({
             showUsersJoined: [this.props.currentUserID],
+            connecting: Boolean(window.callsClient?.isConnecting()),
         });
 
         setTimeout(() => {
@@ -372,7 +373,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
         });
 
         window.callsClient?.on('connect', () => {
-            this.setState({connected: true});
+            this.setState({connecting: false});
 
             if (this.props.global) {
                 sendDesktopEvent('calls-joined-call', {
@@ -1494,7 +1495,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
                 <div style={{display: 'flex', flexDirection: 'column-reverse'}}>
                     {joinedUsers}
                 </div>
-                {this.state.connected &&
+                {!this.state.connecting &&
                     <div className='calls-notification-bar calls-slide-top'>
                         {notificationContent}
                     </div>
@@ -1704,7 +1705,7 @@ export default class CallWidget extends React.PureComponent<Props, State> {
                 style={mainStyle}
                 ref={this.node}
             >
-                <LoadingOverlay visible={this.state.connected}/>
+                <LoadingOverlay visible={this.state.connecting}/>
 
                 <div
                     ref={this.menuNode}

diff --git a/webapp/src/components/call_widget/loading_overlay.tsx b/webapp/src/components/call_widget/loading_overlay.tsx
@@ -1,13 +1,26 @@
-import React from 'react';
+import React, {useState} from 'react';
 import styled, {css} from 'styled-components';
 
 export type Props = {
     visible: boolean,
 }
 
 export default function LoadingOverlay(props: Props) {
+    const [animationEnded, setAnimationEnded] = useState(false);
+
+    if (!props.visible && animationEnded) {
+        return null;
+    }
+
+    const onAnimationEnd = () => {
+        setAnimationEnded(true);
+    };
+
     return (
-        <Container visible={props.visible}>
+        <Container
+            visible={props.visible}
+            onAnimationEnd={onAnimationEnd}
+        >
             <Body>
                 <Spinner size={16}/>
                 <Text>{'Connecting to the call...'}</Text>
@@ -27,8 +40,9 @@ const Container = styled.div<{visible: boolean}>`
   border-radius: 4px;
   z-index: 1;
   background: rgba(var(--center-channel-bg-rgb), 0.7);
+  app-region: drag;
 
-  ${({visible}) => visible && css`
+  ${({visible}) => !visible && css`
       visibility: hidden;
       opacity: 0;
       transition: visibility 0s 0.3s, opacity 0.3s ease-out;