fixed sizing bug

1 files changed, 20 insertions, 4 deletions

diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index 96620aff9..249461b67 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -5,6 +5,8 @@ import * as React from 'react';
 import './LoadingBox.scss';
 import ReactLoading from 'react-loading';
 import { StrCast } from '../../../fields/Types';
+import { computed, observable } from 'mobx';
+import { Docs } from '../../documents/Documents';
 
 @observer
 export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -12,6 +14,12 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return FieldView.LayoutString(LoadingBox, fieldKey);
     }
 
+    @computed
+    private get isLoading() {
+        const file = Docs.Create.filesToDocs.get(this.rootDoc);
+        return file ? true : false;
+    }
+
     componentDidMount() {
         console.log(this.rootDoc);
         // const file = Docs.Create.filesToDocs.get(this.rootDoc);
@@ -44,10 +52,18 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     render() {
         return (
             <div className="loadingBoxContainer">
-                <p className="text">Loading:</p>
-                <br></br>
-                <p className="text">{StrCast(this.rootDoc.title)}</p>
-                <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
+                {this.isLoading ? (
+                    <div>
+                        <p className="text">Loading:</p>
+                        <br></br>
+                        <span className="text">{StrCast(this.rootDoc.title)}</span>
+                        <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
+                    </div>
+                ) : (
+                    <div>
+                        <span>Error Loading File: {StrCast(this.rootDoc.title)}</span>
+                    </div>
+                )}
             </div>
         );
     }