add progress-bar

src/renderer/component/common/loading-screen.jsx

@@ -1,10 +1,12 @@
 // @flow
 import React from 'react';
 import Spinner from 'component/spinner';
+import ProgressBar from 'component/common/progress-bar';
 
 type Props = {
-  spinner: boolean,
   status: string,
+  spinner: boolean,
+  progress?: number,
 };
 
 class LoadingScreen extends React.PureComponent<Props> {
@@ -17,8 +19,8 @@ class LoadingScreen extends React.PureComponent<Props> {
     return (
       <div className="content__loading">
         {spinner && <Spinner light />}
-
-        <span className="content__loading-text">{status}</span>
+        {progress && <ProgressBar progress={progress}/>}
+        {status && <span className="content__loading-text">{status}</span>}
       </div>
     );
   }

src/renderer/component/common/progress-bar.jsx

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+
+type Props = {
+  progress: number,
+};
+
+class progressBar extends React.PureComponent<Props> {
+  static defaultProps = {
+    progress: 0,
+  };
+
+  render() {
+    const { progress } = this.props;
+    return (
+      <div className="progress-bar">
+        <div className="progress-bar__progress" style={{width: progress}}/>
+      </div>
+    );
+  }
+}
+
+export default LoadingScreen;

src/renderer/component/threeViewer/index.jsx

@@ -19,8 +19,12 @@ type Props = {
 class ThreeViewer extends React.PureComponent<Props> {
   constructor(props: Props) {
     super(props);
+
+    const { theme } = this.props;
+
     //Main container
     this.viewer = React.createRef();
+
     // Object colors
     this.materialColors = {
       red: '#e74c3c',
@@ -29,12 +33,7 @@ class ThreeViewer extends React.PureComponent<Props> {
       orange: '#f39c12',
     };
 
-    this.state = {
-      error: null,
-      isReady: false,
-      isLoading: false,
-    };
-
+    // Viewer themes
     this.themes = {
       dark: {
         gridColor: '#414e5c',
@@ -51,8 +50,14 @@ class ThreeViewer extends React.PureComponent<Props> {
     };
 
     // Select current theme
-    const { theme } = this.props;
     this.theme = this.themes[theme] || this.themes.light;
+
+    // State
+    this.state = {
+      error: null,
+      isReady: false,
+      isLoading: false,
+    };
   }
 
   createOrbitControls(camera, canvas) {
@@ -186,8 +191,8 @@ class ThreeViewer extends React.PureComponent<Props> {
   }
 
   handleProgress(url, currentItem, totalItems) {
-    // Handle progress
-    // TODO: Show progressbar...
+    const progress = (currentItem / totalItems) * 100;
+    this.setState({progress});
   }
 
   handleColorChange(color) {
@@ -255,15 +260,15 @@ class ThreeViewer extends React.PureComponent<Props> {
   }
 
   render() {
-    const { isReady, isLoading, error } = this.state;
+    const { error, progress, isReady, isLoading } = this.state;
     const loadingMessage = 'Rendering model.';
     const showViewer = isReady && !error;
     const showLoading = isLoading && !error;
 
     return (
       <React.Fragment>
-        {error && <LoadingScreen status={error} />}
-        {showLoading && <LoadingScreen status={loadingMessage} />}
+        {error && <LoadingScreen status={error} spinner={false} />}
+        {showLoading && <LoadingScreen status={loadingMessage} spinner={false} progress={progress} />}
         <div style={{ opacity: isReady ? 1 : 0 }} className="three-viewer" ref={this.viewer} />
       </React.Fragment>
     );

src/renderer/scss/component/_progress-bar.scss

@@ -0,0 +1,16 @@
+.progress-bar {
+    width: 75%;
+    height: 5px;
+    display: block;
+    background: rgba(255, 255, 255, 0.25);
+    border-radius:  3px;
+    overflow: hidden;
+}
+
+.progress-bar__progress {
+    width: 20px;
+    height: 5px;
+    background: var(--color-primary);
+    border-radius:  3px;
+    transition: width 0.3s ease;
+}