From 849c8a6ae1c70a79a6db7c9f5a70dade837fd379 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Thu, 2 Jul 2020 23:34:15 -0300
Subject: [PATCH] Add new loading component (#1855)

---
 .../viewports/TrackedCornerstoneViewport.js   |  2 +
 .../src/viewports/ViewportLoadingIndicator.js | 41 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 extensions/measurement-tracking/src/viewports/ViewportLoadingIndicator.js

diff --git a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
index 1b5b017f0..35a1ee8ef 100644
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
+++ b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
@@ -13,6 +13,7 @@ import {
 import { useTrackedMeasurements } from './../getContextModule';
 
 import ViewportOverlay from './ViewportOverlay';
+import ViewportLoadingIndicator from './ViewportLoadingIndicator';
 
 const { formatDate } = utils;
 
@@ -297,6 +298,7 @@ function TrackedCornerstoneViewport({
           isPlaying={false}
           frameRate={24}
           isOverlayVisible={true}
+          loadingIndicatorComponent={ViewportLoadingIndicator}
           viewportOverlayComponent={props => {
             return (
               <ViewportOverlay
diff --git a/extensions/measurement-tracking/src/viewports/ViewportLoadingIndicator.js b/extensions/measurement-tracking/src/viewports/ViewportLoadingIndicator.js
new file mode 100644
index 000000000..46b6c7f72
--- /dev/null
+++ b/extensions/measurement-tracking/src/viewports/ViewportLoadingIndicator.js
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+const ViewportLoadingIndicator = ({ error }) => {
+  if (error) {
+    return (
+      <>
+        <div className="bg-black h-full w-full absolute opacity-50"></div>
+        <div className="text-primary-light text-xl font-thin">
+          <h4>Error Loading Image</h4>
+          <p>An error has occurred.</p>
+          <p>{error.message}</p>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="bg-black h-full w-full absolute opacity-50"></div>
+      <div className="absolute transparent w-full h-full flex items-center justify-center">
+        <p className="text-primary-light text-xl font-thin">
+          Loading...
+      </p>
+      </div>
+    </>
+  );
+};
+
+ViewportLoadingIndicator.propTypes = {
+  percentComplete: PropTypes.number,
+  error: PropTypes.object,
+};
+
+ViewportLoadingIndicator.defaultProps = {
+  percentComplete: 0,
+  error: null,
+};
+
+export default ViewportLoadingIndicator;