Adding loading spinner to indicate webview loading state

desktop-app/app/components/Renderer/index.js

@@ -1,25 +1,28 @@
 // @flow
-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import WebViewContainer from '../../containers/WebViewContainer';
 import cx from 'classnames';
+import Spinner from '../Spinner';
 
 import styles from './style.module.css';
 
-class Renderer extends Component {
-  render() {
-    console.log('Renderer this.props', this.props);
-    return (
-      <div className={cx(styles.container)}>
-        <h3 className={cx(styles.deviceTitle)}>{this.props.device.name}</h3>
-        <div className={cx(styles.deviceWrapper)}>
-          <WebViewContainer
-            device={this.props.device}
-            transmitNavigatorStatus={this.props.transmitNavigatorStatus}
-          />
-        </div>
+function Renderer(props) {
+  const [loading, setLoading] = useState(true);
+  return (
+    <div className={cx(styles.container)}>
+      <div className={styles.titleContainer}>
+        <h3 className={cx(styles.deviceTitle)}>{props.device.name}</h3>
+        {loading && <Spinner size={18} />}
       </div>
-    );
-  }
+      <div className={cx(styles.deviceWrapper)}>
+        <WebViewContainer
+          device={props.device}
+          transmitNavigatorStatus={props.transmitNavigatorStatus}
+          onLoadingStateChange={setLoading}
+        />
+      </div>
+    </div>
+  );
 }
 
 export default Renderer;

desktop-app/app/components/Renderer/style.module.css

@@ -5,6 +5,12 @@
 .deviceTitle {
   font-weight: normal;
   font-size: 16px;
+  margin-right: 5px;
 }
 .deviceWrapper {
 }
+
+.titleContainer {
+  display: flex;
+  align-items: center;
+}

desktop-app/app/components/Spinner/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import {makeStyles} from '@material-ui/core/styles';
+
+import styles from './styles.css';
+
+export default function(props) {
+  const classes = makeStyles({
+    root: {
+      position: 'relative',
+    },
+    top: {
+      color: '#ffffff00', //'#eef3fd',
+    },
+    bottom: {
+      color: '#ffffff80', //'#6798e5',
+      animationDuration: '550ms',
+      position: 'absolute',
+      left: 0,
+    },
+  })();
+
+  return (
+    <div className={classes.root}>
+      <CircularProgress
+        variant="determinate"
+        value={100}
+        className={classes.top}
+        size={24}
+        thickness={4}
+        {...props}
+      />
+      <CircularProgress
+        variant="indeterminate"
+        disableShrink
+        className={classes.bottom}
+        size={24}
+        thickness={4}
+        {...props}
+      />
+    </div>
+  );
+}

desktop-app/app/components/WebView/index.js

@@ -66,6 +66,13 @@ class WebView extends Component {
       this.initEventTriggers(this.webviewRef.current);
     });
 
+    this.webviewRef.current.addEventListener('did-start-loading', () => {
+      this.props.onLoadingStateChange(true);
+    });
+    this.webviewRef.current.addEventListener('did-stop-loading', () => {
+      this.props.onLoadingStateChange(false);
+    });
+
     this.webviewRef.current.addEventListener('will-navigate', ({url}) => {
       console.log('Navigating to ', url);
       this.props.onAddressChange(url);
@@ -335,7 +342,6 @@ class WebView extends Component {
   };
 
   _getScreenshotFileName(now = new Date(), createSeparateDir) {
-    console.log('createSeparateDir', createSeparateDir);
     const dateString = `${now
       .toLocaleDateString()
       .split('/')