Positioned document loading state with the document content

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] }} />

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;