Merge pull request #5435 from Tainan404/issue-5414

Add spinning arrows while load the screenshare.

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

 import React from 'react';
 
+import { styles } from './styles';
+
 export default class ScreenshareComponent extends React.Component {
   componentDidMount() {
     this.props.presenterScreenshareHasStarted();
@@ -16,7 +18,8 @@ export default class ScreenshareComponent extends React.Component {
 
   render() {
     return (
-      <video id="screenshareVideo" style={{ maxHeight: '100%', width: '100%' }} autoPlay playsInline />
+      [(<div className={styles.connecting} />),
+      (<video id="screenshareVideo" style={{ maxHeight: '100%', width: '100%' }} autoPlay playsInline />)]
     );
   }
 }

bigbluebutton-html5/imports/ui/components/screenshare/styles.scss

+@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/components/video-provider/video-list/styles";
+
+.connecting {
+  @extend .connecting;
+  z-index: -1;
+  background-color: transparent;
+  color: $color-white;
+  font-size: 2.5rem * 5;
+}