From 5eb3d5d485b17b98b19443d8def2f03dec9b38ef Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 3 Jul 2017 15:39:25 -0700
Subject: Make folder for responsive UI

---
 ui/classic/app/components/loading.js | 53 ++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 ui/classic/app/components/loading.js

(limited to 'ui/classic/app/components/loading.js')

diff --git a/ui/classic/app/components/loading.js b/ui/classic/app/components/loading.js
new file mode 100644
index 000000000..87d6f5d20
--- /dev/null
+++ b/ui/classic/app/components/loading.js
@@ -0,0 +1,53 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+
+inherits(LoadingIndicator, Component)
+module.exports = LoadingIndicator
+
+function LoadingIndicator () {
+  Component.call(this)
+}
+
+LoadingIndicator.prototype.render = function () {
+  const { isLoading, loadingMessage } = this.props
+
+  return (
+    h(ReactCSSTransitionGroup, {
+      className: 'css-transition-group',
+      transitionName: 'loader',
+      transitionEnterTimeout: 150,
+      transitionLeaveTimeout: 150,
+    }, [
+
+      isLoading ? h('div', {
+        style: {
+          zIndex: 10,
+          position: 'absolute',
+          flexDirection: 'column',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          width: '100%',
+          background: 'rgba(255, 255, 255, 0.8)',
+        },
+      }, [
+        h('img', {
+          src: 'images/loading.svg',
+        }),
+
+        h('br'),
+
+        showMessageIfAny(loadingMessage),
+      ]) : null,
+    ])
+  )
+}
+
+function showMessageIfAny (loadingMessage) {
+  if (!loadingMessage) return null
+  return h('span', loadingMessage)
+}
-- 
cgit v1.2.3