#10 Add loader to DicomViewer example

MetaCell · Mar 25, 2021 · a287b1d · a287b1d
1 parent 1c7c495
commit a287b1d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js b/geppetto.js/geppetto-ui/src/dicom-viewer/DicomViewer.js
@@ -329,6 +329,7 @@ class DicomViewer extends Component {
 
           _this.configureEvents();
           _this.ready = true;
+          _this.props.onLoad()
         })
         .catch(function (error) {
           window.console.log('oops... something went wrong...');
@@ -812,6 +813,11 @@ class DicomViewer extends Component {
   }
 }
 
+DicomViewer.defaultProps = {
+  onLoad: () => {},
+};
+
+
 DicomViewer.propTypes = {
   /**
    * Component identifier
@@ -849,6 +855,10 @@ DicomViewer.propTypes = {
    * Bool that defines the showing or not of the download button
    */
   showDownloadButton: PropTypes.bool,
+  /**
+   * Callback function to be called after load is complete
+   */
+  onLoad: PropTypes.func,
 };
 
 export default withStyles(styles)(DicomViewer);
diff --git a/geppetto.js/geppetto-ui/src/dicom-viewer/showcase/examples/DicomViewerExample.js b/geppetto.js/geppetto-ui/src/dicom-viewer/showcase/examples/DicomViewerExample.js
@@ -1,16 +1,34 @@
 import React, { Component } from 'react';
 import DicomViewer from '../../DicomViewer';
+import Loader from "@geppettoengine/geppetto-ui/loader/Loader";
 
 export default class DicomViewerExample extends Component {
   constructor (props) {
-    super(props);
+      super(props);
+      this.state = {ready: true};
+      this.onLoad = this.onLoad.bind(this)
+
+  }
+
+  componentDidMount() {
+      this.setState({
+          ready: false
+      });
+  }
+
+    onLoad(){
+      this.setState({
+          ready: true
+      });
   }
 
   render () {
     const data
       = 'https://s3.amazonaws.com/patient-hm-august-2017/MRI/IN+SITU+2008+MPRAGE+1MM-ISO/IN-SITU-2008-MPRAGE-1MM-ISO-ALT2.nii.gz';
 
-    return (
+    const {ready} = this.state
+
+    return ready? (
       <div
         style={{
           position: 'relative',
@@ -27,8 +45,9 @@ export default class DicomViewerExample extends Component {
           onShiftClick="goToPoint"
           onCtrlClick="togglMode"
           showDownloadButton={true}
+          onLoad={this.onLoad}
         />
       </div>
-    );
+    ): <Loader/>
   }
 }