diff options
| -rw-r--r-- | app/features/conference/components/Conference.js | 55 | ||||
| -rw-r--r-- | app/features/conference/styled/LoadingIndicator.js | 10 | ||||
| -rw-r--r-- | app/features/conference/styled/index.js | 1 | ||||
| -rw-r--r-- | package-lock.json | 45 | ||||
| -rw-r--r-- | package.json | 1 |
5 files changed, 103 insertions, 9 deletions
diff --git a/app/features/conference/components/Conference.js b/app/features/conference/components/Conference.js index f50fbe4..9f38af7 100644 --- a/app/features/conference/components/Conference.js +++ b/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. * diff --git a/app/features/conference/styled/LoadingIndicator.js b/app/features/conference/styled/LoadingIndicator.js new file mode 100644 index 0000000..456e5e0 --- /dev/null +++ b/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; +`; diff --git a/app/features/conference/styled/index.js b/app/features/conference/styled/index.js index 50472e0..d4bc4c6 100644 --- a/app/features/conference/styled/index.js +++ b/app/features/conference/styled/index.js @@ -1 +1,2 @@ +export { default as LoadingIndicator } from './LoadingIndicator'; export { default as Wrapper } from './Wrapper'; diff --git a/package-lock.json b/package-lock.json index 5718f48..007b6db 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index fad0d00..261dc08 100644 --- a/package.json +++ b/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", |