4 files changed, 46 insertions, 2 deletions
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 2f3f57bac..79f629072 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -462,7 +462,8 @@ export function CollectionSubView<X>(moreProps?: X) {
             let placeholders: Doc[] = [];
             // handle yt case
             if (typeof files === 'string') {
-                placeholders.push(Docs.Create.TextDocument('Loading: ' + text, { ...options, title: text, _width: 400, _height: 30 }));
+                placeholders.push(Docs.Create.LoadingDocument('Loading...', text, 500, 500, { ...options }));
+                // placeholders.push(Docs.Create.TextDocument('Loading: ' + text, { ...options, title: text, _width: 400, _height: 30 }));
             } else {
                 // every other doc type is an array of File
 
@@ -471,7 +472,9 @@ export function CollectionSubView<X>(moreProps?: X) {
                 files.forEach(file => {
                     textStr += file.name + '\n';
                 });
-                placeholders.push(Docs.Create.TextDocument('Loading: \n' + textStr, { ...options, title: files.length + ' files', _width: 500, _height: files.length * 40 }));
+                placeholders.push(Docs.Create.LoadingDocument('Loading...', textStr, 500, 500, { ...options }));
+
+                // placeholders.push(Docs.Create.TextDocument('Loading: \n' + textStr, { ...options, title: files.length + ' files', _width: 500, _height: files.length * 40 }));
             }
             // disposer action to remove placeholders once files are uploaded
             const remove = action(() => {
@@ -498,6 +501,7 @@ export function CollectionSubView<X>(moreProps?: X) {
             clientY: number,
             addDocument: (doc: Doc | Doc[]) => boolean
         ) => {
+            // TODO: once loading thing is moved it should update the x and y of the file it is placeholder for
             const disposer = this.placeHolderDisposer(files, options, text);
             // const disposer = OverlayView.Instance.addElement(<ReactLoading type={'spinningBubbles'} color={'green'} height={250} width={250} />, { x: clientX - 125, y: clientY - 125 });
             if (typeof files === 'string') {
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 381436a56..4d4985f2a 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -43,6 +43,7 @@ import { VideoBox } from './VideoBox';
 import { WebBox } from './WebBox';
 import React = require('react');
 import XRegExp = require('xregexp');
+import { LoadingBox } from './LoadingBox';
 
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
@@ -267,6 +268,7 @@ export class DocumentContentsView extends React.Component<
                     DataVizBox,
                     HTMLtag,
                     ComparisonBox,
+                    LoadingBox,
                 }}
                 bindings={bindings}
                 jsx={layoutFrame}
diff --git a/src/client/views/nodes/LoadingBox.scss b/src/client/views/nodes/LoadingBox.scss
new file mode 100644
index 000000000..239faa78e
--- /dev/null
+++ b/src/client/views/nodes/LoadingBox.scss
@@ -0,0 +1,7 @@
+.loadingBoxContainer {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    background-color: #fdfdfd;
+}
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
new file mode 100644
index 000000000..0e0619241
--- /dev/null
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -0,0 +1,31 @@
+import { observer } from 'mobx-react';
+import { ViewBoxAnnotatableComponent } from '../DocComponent';
+import { FieldView, FieldViewProps } from './FieldView';
+import * as React from 'react';
+import './LoadingBox.scss';
+import ReactLoading from 'react-loading';
+
+export interface LoadingBoxProps {
+    title: string;
+    text: string;
+}
+
+@observer
+export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(LoadingBox, fieldKey);
+    }
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="loadingBoxContainer">
+                <span>Loading: {this.dataDoc.text}</span>
+                <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
+            </div>
+        );
+    }
+}