diff --git a/src/renderer/component/common/loading-screen.jsx b/src/renderer/component/common/loading-screen.jsx index f313b412d..24bc33f2e 100644 --- a/src/renderer/component/common/loading-screen.jsx +++ b/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 { @@ -17,8 +19,8 @@ class LoadingScreen extends React.PureComponent { return (
{spinner && } - - {status} + {progress && } + {status && {status}}
); } diff --git a/src/renderer/component/common/progress-bar.jsx b/src/renderer/component/common/progress-bar.jsx new file mode 100644 index 000000000..8b63206ba --- /dev/null +++ b/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 { + static defaultProps = { + progress: 0, + }; + + render() { + const { progress } = this.props; + return ( +
+
+
+ ); + } +} + +export default LoadingScreen; diff --git a/src/renderer/component/threeViewer/index.jsx b/src/renderer/component/threeViewer/index.jsx index 1c3c202f5..0db371092 100644 --- a/src/renderer/component/threeViewer/index.jsx +++ b/src/renderer/component/threeViewer/index.jsx @@ -19,8 +19,12 @@ type Props = { class ThreeViewer extends React.PureComponent { 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 { 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 { }; // 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 { } 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 { } 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 ( - {error && } - {showLoading && } + {error && } + {showLoading && }
); diff --git a/src/renderer/scss/component/_progress-bar.scss b/src/renderer/scss/component/_progress-bar.scss new file mode 100644 index 000000000..4ee4b8dbe --- /dev/null +++ b/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; +}