Added loading spinner in conference component

The spinner will be visible until jitsi-meet iframe is completely loaded.

app/features/conference/components/Conference.js

@@ -1,5 +1,7 @@
 // @flow
 
+import Spinner from '@atlaskit/spinner';
+
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
 import { connect } from 'react-redux';
@@ -17,7 +19,7 @@ import {
 import config from '../../config';
 import { setEmail, setName } from '../../settings';
 
-import { Wrapper } from '../styled';
+import { LoadingIndicator, Wrapper } from '../styled';
 
 type Props = {
 
@@ -52,10 +54,18 @@ type Props = {
     _serverURL: string;
 };
 
+type State = {
+
+    /**
+     * If the conference is loading or not.
+     */
+    isLoading: boolean;
+};
+
 /**
  * Conference component.
  */
-class Conference extends Component<Props, *> {
+class Conference extends Component<Props, State> {
     /**
      * Reference to the element of this component.
      */
@@ -74,7 +84,13 @@ class Conference extends Component<Props, *> {
     constructor() {
         super();
 
+        this.state = {
+            isLoading: true
+        };
+
         this._ref = React.createRef();
+
+        this._onIframeLoad = this._onIframeLoad.bind(this);
     }
 
     /**
@@ -136,7 +152,26 @@ class Conference extends Component<Props, *> {
      * @returns {ReactElement}
      */
     render() {
-        return <Wrapper innerRef = { this._ref } />;
+        return (
+            <Wrapper innerRef = { this._ref }>
+                { this._maybeRenderLoadingIndicator() }
+            </Wrapper>
+        );
+    }
+
+    /**
+     * It renders a loading indicator, if appropriate.
+     *
+     * @returns {?ReactElement}
+     */
+    _maybeRenderLoadingIndicator() {
+        if (this.state.isLoading) {
+            return (
+                <LoadingIndicator>
+                    <Spinner size = 'large' />
+                </LoadingIndicator>
+            );
+        }
     }
 
     /**
@@ -163,6 +198,7 @@ class Conference extends Component<Props, *> {
         const { host } = URL.parse(serverURL);
 
         this._api = new JitsiMeetExternalAPI(host, {
+            onload: this._onIframeLoad,
             parentNode,
             roomName
         });
@@ -208,6 +244,19 @@ class Conference extends Component<Props, *> {
         }
     }
 
+    _onIframeLoad: (*) => void;
+
+    /**
+     * Sets state of loading to false when iframe has completely loaded.
+     *
+     * @returns {void}
+     */
+    _onIframeLoad() {
+        this.setState({
+            isLoading: false
+        });
+    }
+
     /**
      * Saves conference info on joining it.
      *

app/features/conference/styled/LoadingIndicator.js

@@ -0,0 +1,10 @@
+// @flow
+
+import styled from 'styled-components';
+
+export default styled.div`
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+`;

app/features/conference/styled/index.js

@@ -1 +1,2 @@
+export { default as LoadingIndicator } from './LoadingIndicator';
 export { default as Wrapper } from './Wrapper';

package-lock.json

@@ -69,6 +69,19 @@
         "@atlaskit/theme": "3.2.2",
         "babel-runtime": "6.26.0",
         "styled-components": "3.3.0"
+      },
+      "dependencies": {
+        "@atlaskit/spinner": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-5.0.2.tgz",
+          "integrity": "sha512-n0j/urjG3FF9q/6Nae981GwsdvT44zAobPqFGnaeKDfqUzrFHcs1PmL0dqa36aFJzOPZHzl6ZfBl9Q3Vpl9PKQ==",
+          "requires": {
+            "@atlaskit/theme": "3.2.2",
+            "babel-runtime": "6.26.0",
+            "react-transition-group": "2.3.1",
+            "styled-components": "3.3.0"
+          }
+        }
       }
     },
     "@atlaskit/checkbox": {
@@ -272,6 +285,17 @@
             "styled-components": "3.3.0",
             "uuid": "3.2.1"
           }
+        },
+        "@atlaskit/spinner": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-5.0.2.tgz",
+          "integrity": "sha512-n0j/urjG3FF9q/6Nae981GwsdvT44zAobPqFGnaeKDfqUzrFHcs1PmL0dqa36aFJzOPZHzl6ZfBl9Q3Vpl9PKQ==",
+          "requires": {
+            "@atlaskit/theme": "3.2.2",
+            "babel-runtime": "6.26.0",
+            "react-transition-group": "2.3.1",
+            "styled-components": "3.3.0"
+          }
         }
       }
     },
@@ -425,14 +449,23 @@
       }
     },
     "@atlaskit/spinner": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-5.0.2.tgz",
-      "integrity": "sha512-n0j/urjG3FF9q/6Nae981GwsdvT44zAobPqFGnaeKDfqUzrFHcs1PmL0dqa36aFJzOPZHzl6ZfBl9Q3Vpl9PKQ==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-8.0.0.tgz",
+      "integrity": "sha512-IaSpACKjlo5MZoEAfOKuiCLpkcdgkLTcUcQkMaUIqlNJpU9tJ2XCqqnbZobL9d2PiZ3I9hukaeOwreFJq9hLPw==",
       "requires": {
-        "@atlaskit/theme": "3.2.2",
+        "@atlaskit/theme": "4.0.5",
         "babel-runtime": "6.26.0",
-        "react-transition-group": "2.3.1",
-        "styled-components": "3.3.0"
+        "react-transition-group": "2.3.1"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "4.0.5",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.5.tgz",
+          "integrity": "sha512-Hze/EvIWFTBPvQHonyckv18ZkuvFK4AIK+KaBD+30fMPOZq/tROsgz7wC2h15aCZkT9DileGcNXu+JxiJINcig==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
       }
     },
     "@atlaskit/theme": {

package.json

@@ -38,6 +38,7 @@
     "@atlaskit/icon": "12.0.1",
     "@atlaskit/navigation": "32.0.2",
     "@atlaskit/page": "7.0.1",
+    "@atlaskit/spinner": "8.0.0",
     "@atlaskit/theme": "3.2.2",
     "electron-debug": "2.0.0",
     "electron-is-dev": "0.3.0",