From 45445606b4ba1c67e59afd497c255af36243d011 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 18 Nov 2018 21:27:50 -0800
Subject: [PATCH] Improve loading state

---
 app/components/Input.js     |  2 ++
 app/components/InputRich.js | 17 +++++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/components/Input.js b/app/components/Input.js
index d4d06fbc1..a414c7c75 100644
--- a/app/components/Input.js
+++ b/app/components/Input.js
@@ -31,6 +31,8 @@ const RealInput = styled.input`
 
 const Wrapper = styled.div`
   max-width: ${props => (props.short ? '350px' : '100%')};
+  min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '0')};
+  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'auto')};
 `;
 
 export const Outline = styled(Flex)`
diff --git a/app/components/InputRich.js b/app/components/InputRich.js
index 5d7b6dcd6..244199795 100644
--- a/app/components/InputRich.js
+++ b/app/components/InputRich.js
@@ -4,7 +4,7 @@ import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
-import { LabelText, Outline } from 'components/Input';
+import Input, { LabelText, Outline } from 'components/Input';
 
 type Props = {
   label: string,
@@ -35,9 +35,18 @@ class InputRich extends React.Component<Props> {
     return (
       <React.Fragment>
         <LabelText>{label}</LabelText>
-        <StyledOutline maxHeight={maxHeight} minHeight={minHeight}>
-          {Editor && <Editor {...rest} />}
-        </StyledOutline>
+        {Editor ? (
+          <StyledOutline maxHeight={maxHeight} minHeight={minHeight}>
+            <Editor {...rest} />
+          </StyledOutline>
+        ) : (
+          <Input
+            maxHeight={maxHeight}
+            minHeight={minHeight}
+            placeholder="Loading…"
+            disabled
+          />
+        )}
       </React.Fragment>
     );
   }