From 202e5583ffa830fa60130a5e27b4f58bb9584faf Mon Sep 17 00:00:00 2001
From: akshitkrnagpal <akshitkrnagpal@gmail.com>
Date: Thu, 28 Jun 2018 02:20:42 +0530
Subject: [PATCH] Added loading spinner in conference component
The spinner will be visible until jitsi-meet iframe is completely loaded.
---
.../conference/components/Conference.js | 55 ++++++++++++++++++-
.../conference/styled/LoadingIndicator.js | 10 ++++
app/features/conference/styled/index.js | 1 +
package-lock.json | 45 +++++++++++++--
package.json | 1 +
5 files changed, 103 insertions(+), 9 deletions(-)
create mode 100644 app/features/conference/styled/LoadingIndicator.js
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",
--
GitLab