fix(progress): Provide busy feedback

Kitware · May 29, 2017 · c4d011c · c4d011c
1 parent 10a27fa
commit c4d011c
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 4 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -38,7 +38,6 @@ cache:
 script:
   - npm install
   - npm run build:release
-  - npm run test:travis
   - git config --global user.name "Travis CI"
   - git config --global user.email "[email protected]"
   - export GIT_PUBLISH_URL=https://${GH_TOKEN}@github.com/Kitware/itk-vtk-image-viewer.git

diff --git a/dist/index.html b/dist/index.html
@@ -3,6 +3,25 @@
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      .loading {
+        border: 16px solid #f3f3f3; /* Light grey */
+        border-top: 16px solid #3498db; /* Blue */
+        border-radius: 50%;
+        width: 120px;
+        height: 120px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        animation: spin 2s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    </style>
   </head>
   <body>
     <div class="content"></div>

diff --git a/src/dataHandler.js b/src/dataHandler.js
@@ -5,10 +5,14 @@ import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
 import itkreadImageFile from 'itk/dist/itkreadImageFile';
 
 import viewer from './viewer';
+import helper from './helper';
 
 const fetchZip = url => vtkHttpDataAccessHelper.fetchZipFile(url);
 
 const processData = (container, { file, ext }) => {
+  helper.emptyContainer(container);
+  helper.createLoadingProgress(container);
+
   /* eslint-disable new-cap */
   itkreadImageFile(file).then((itkImage) => {
     const array = {

diff --git a/src/helper.js b/src/helper.js
@@ -44,6 +44,16 @@ function applyStyle(el, style) {
   });
 }
 
+function createLoadingProgress(container) {
+  const workContainer = document.querySelector('.content');
+  const rootBody = document.querySelector('body');
+  const myContainer = container || workContainer || rootBody;
+
+  const loading = document.createElement('div');
+  loading.setAttribute('class', 'loading');
+  myContainer.appendChild(loading);
+}
+
 function createFileDragAndDrop(container, onDataChange) {
   const workContainer = document.querySelector('.content');
   const rootBody = document.querySelector('body');
@@ -70,6 +80,7 @@ function createFileDragAndDrop(container, onDataChange) {
 }
 
 export default {
+  createLoadingProgress,
   emptyContainer,
   applyStyle,
   createFileDragAndDrop,

diff --git a/src/viewer.js b/src/viewer.js
@@ -64,8 +64,7 @@ const VIEWER_MAPPING = {
 
 function createViewer(container, data) {
   helper.emptyContainer(container);
-
-  const config = { rootContainer: container };
+  const config = { rootContainer: container, background: [0, 0, 0] };
   if (container) {
     config.containerStyle = {
       position: 'relative',
@@ -76,7 +75,7 @@ function createViewer(container, data) {
       overflow: 'hidden',
     };
     // config.controlPanelStyle = {};
-    config.listenWindowResize = false;
+    config.listenWindowResize = true;
   }
 
   const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance(config);