diff --git a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js b/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js
index 4827f193b..f2240fe31 100644
--- a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js
+++ b/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js
@@ -18,6 +18,7 @@ import {
} from '@fortawesome/free-solid-svg-icons';
import CustomToolbar from '../common/CustomToolbar';
import { createZipFromRemoteFiles } from './util';
+import Loader from "../loader/Loader";
const styles = {
dicomViewer: {
@@ -55,6 +56,7 @@ class DicomViewer extends Component {
? 'coronal'
: this.props.orientation,
fullScreen: false,
+ ready: false
};
// 3d renderer
@@ -330,6 +332,7 @@ class DicomViewer extends Component {
_this.configureEvents();
_this.ready = true;
_this.props.onLoaded()
+ _this.setState({ ready: true })
})
.catch(function (error) {
window.console.log('oops... something went wrong...');
@@ -692,7 +695,7 @@ class DicomViewer extends Component {
}
render () {
- const { classes, toolbarOptions } = this.props;
+ const { classes, toolbarOptions, loaderOptions } = this.props;
const { fullScreen } = this.state;
const customButtons = this.getCustomButtons();
@@ -710,6 +713,18 @@ class DicomViewer extends Component {
height: '100%',
width: '100%',
};
+
+ const loader = loaderOptions && loaderOptions.instance ? (
+
+ ) :
const toolbar = toolbarOptions && toolbarOptions.instance ? (
+ {!this.state.ready && loader}
{toolbar}
- );
+ )
}
}
@@ -832,7 +848,8 @@ DicomViewer.defaultProps = {
onShiftClick: 'goToPoint',
onDoubleClick: 'goToPoint',
showDownloadButton: false,
- toolbarOptions: null
+ toolbarOptions: null,
+ loaderOptions: null
};
@@ -918,6 +935,45 @@ DicomViewer.propTypes = {
*/
buttonStyles: PropTypes.shape({}),
}),
+ /**
+ * Options to customize the loader
+ */
+ loaderOptions: PropTypes.shape({
+ /**
+ * Reference to toolbar component
+ */
+ instance: PropTypes.elementType,
+ /**
+ * Custom toolbar props
+ */
+ props: PropTypes.shape({}),
+ /**
+ * Function to handle the close of the Loader
+ */
+ handleClose: PropTypes.func,
+ /**
+ * Array of Custom messages to display
+ */
+ messages: PropTypes.array,
+ /**
+ * Number of milliseconds between custom messages
+ */
+ messagesInterval: PropTypes.number,
+ /**
+ * Number of the progress value to show in linear determinate (in percentage)
+ */
+ elapsed: PropTypes.number,
+ /**
+ * Style to be applied to the Loader background
+ */
+ backgroundStyle: PropTypes.shape({
+ /**
+ * Loader's background color. Defaults to rgba(255,142,0,0.1)
+ */
+ backgroundColor: PropTypes.string,
+ }),
+
+ }),
};
export default withStyles(styles)(DicomViewer);