From dbcfe1199e233238bb7ced12ed7fc93151f347e3 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Fri, 7 Jul 2017 00:14:00 -0700
Subject: [PATCH] Positioned document loading state with the document content

---
 frontend/components/PreviewLoading/PreviewLoading.js | 4 ++--
 frontend/scenes/Document/Document.js                 | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/components/PreviewLoading/PreviewLoading.js b/frontend/components/PreviewLoading/PreviewLoading.js
index 4d6eec02..150e1c8e 100644
--- a/frontend/components/PreviewLoading/PreviewLoading.js
+++ b/frontend/components/PreviewLoading/PreviewLoading.js
@@ -11,7 +11,7 @@ const randomValues = Array.from(
   () => `${randomInteger(85, 100)}%`
 );
 
-export default () => {
+export default (props: {}) => {
   return (
     <ReactCSSTransitionGroup
       transitionName="fadeIn"
@@ -22,7 +22,7 @@ export default () => {
       transitionEnterTimeout={0}
       transitionLeaveTimeout={0}
     >
-      <Flex column auto>
+      <Flex column auto {...props}>
         <Mask style={{ width: randomValues[0] }} header />
         <Mask style={{ width: randomValues[1] }} />
         <Mask style={{ width: randomValues[2] }} />
diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index f6598e62..e653ab27 100644
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -137,7 +137,7 @@ type Props = {
         {this.state.isLoading && <LoadingIndicator />}
         {isFetching &&
           <CenteredContent>
-            <PreviewLoading />
+            <LoadingState />
           </CenteredContent>}
         {!isFetching &&
           this.document &&
@@ -208,6 +208,10 @@ const Container = styled(Flex)`
   width: 100%;
 `;
 
+const LoadingState = styled(PreviewLoading)`
+  margin: 80px 20px;
+`;
+
 const PagePadding = styled(Flex)`
   padding: 80px 20px;
   position: relative;