hide connecting icon when video is loaded

bigbluebutton-html5/imports/ui/components/screenshare/component.jsx

@@ -3,6 +3,14 @@ import React from 'react';
 import { styles } from './styles';
 
 export default class ScreenshareComponent extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      hideConnecting: false,
+    };
+
+    this.hideConnectingIcon = this.hideConnectingIcon.bind(this);
+  }
   componentDidMount() {
     this.props.presenterScreenshareHasStarted();
   }
@@ -15,11 +23,14 @@ export default class ScreenshareComponent extends React.Component {
     this.props.presenterScreenshareHasEnded();
     this.props.unshareScreen();
   }
+  hideConnectingIcon() {
+    this.setState({ hideConnecting: true });
+  }
 
   render() {
     return (
-      [(<div className={styles.connecting} />),
-      (<video id="screenshareVideo" style={{ maxHeight: '100%', width: '100%' }} autoPlay playsInline />)]
+      [(<div className={styles.connecting} hidden={this.state.hideConnecting}/>),
+      (<video id="screenshareVideo" style={{ maxHeight: '100%', width: '100%' }} autoPlay playsInline onLoadedData={this.hideConnectingIcon} />)]
     );
   }
 }