Add a loading indicator to the application to show application activi…

…ty while auth launch and data retrieval are taking place (#4)
cerner · Jun 22, 2017 · 4900643 · 4900643
1 parent 60e8bc7
commit 4900643
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # CHANGELOG
 
+* 1.2.0
+    - Implemented a loading indicator while app loads and data is fetched
 * 1.1.0
     - Update recommendation text to have more clinical value 
 * 1.0.0

diff --git a/app/loading-indicator.css b/app/loading-indicator.css
@@ -0,0 +1,41 @@
+.loading-indicator {
+  margin: 100px auto 0;
+  width: 70px;
+  text-align: center;
+}
+
+.loading-indicator > div {
+  width: 18px;
+  height: 18px;
+  background-color: #000;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.loading-indicator .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.loading-indicator .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
+    }
+}
diff --git a/build/js/bundle.js b/build/js/bundle.js
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel='stylesheet' type='text/css' href='styles.css'>
     -->
     <link rel='stylesheet' type='text/css' href='build/css/styles.css'>
+    <link rel='stylesheet' type='text/css' href='app/loading-indicator.css'>
     <style>
       body {
         margin: 0;
@@ -16,6 +17,11 @@
     <title>SMART ASCVD Risk App</title>
   </head>
   <body>
+    <div id='loadingIndicator' class='loading-indicator'>
+      <div class='bounce1'></div>
+      <div class='bounce2'></div>
+      <div class='bounce3'></div>
+    </div>
     <div id='container'></div>
     <script src='lib/fhir-client.min.js'></script>
     <script src='lib/jquery.min.js'></script>

diff --git a/index.jsx b/index.jsx
@@ -6,6 +6,11 @@ import './app/polyfill';
 
 ASCVDRisk.fetchPatientData().then(
   () => {
+    const loadingNode = document.getElementById('loadingIndicator');
+    while (loadingNode.firstChild) {
+      loadingNode.removeChild(loadingNode.firstChild);
+    }
+    loadingNode.parentNode.removeChild(loadingNode);
     ReactDOM.render(<App />, document.getElementById('container'));
   },
 );
diff --git a/launch.html b/launch.html
@@ -1,13 +1,19 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" hidden>
+<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta charset=utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name='viewport' content='width=device-width, initial-scale=1' />
     <title>SMART ASCVD Risk App</title>
+    <link rel='stylesheet' type='text/css' href='app/loading-indicator.css'>
     <script src='lib/fhir-client.min.js'></script>
   </head>
   <body>
+    <div id='loadingIndicator' class='loading-indicator'>
+      <div class='bounce1'></div>
+      <div class='bounce2'></div>
+      <div class='bounce3'></div>
+    </div>
     <script>
       FHIR.oauth2.authorize({
         'client_id': 'my_web_app',

diff --git a/webpack.config.js b/webpack.config.js
@@ -15,6 +15,7 @@ module.exports = {
     extensions: ['', '.js', '.jsx']
   },
   plugins: [
+    new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')}}),
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.UglifyJsPlugin(),
     new ExtractTextPlugin('../css/styles.css')