Made KVP not render while documents are loading

2 files changed, 23 insertions, 11 deletions

diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index f3d76c49b..e96a0f068 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -46,10 +46,16 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
     layoutKey: string,
 }> {
     @computed get layout(): string {
-        return StrCast(this.props.Document[this.props.layoutKey],
-            this.props.Document.data ?
+        const layout = Cast(this.props.Document[this.props.layoutKey], "string");
+        if (layout === undefined) {
+            return this.props.Document.data ?
                 "<FieldView {...props} fieldKey='data' />" :
-                KeyValueBox.LayoutString(this.props.Document.proto ? "proto" : ""));
+                KeyValueBox.LayoutString(this.props.Document.proto ? "proto" : "");
+        } else if (typeof layout === "string") {
+            return layout;
+        } else {
+            return "<p>Loading layout</p>";
+        }
     }
 
     CreateBindings(): JsxBindings {
diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index a5f5e368b..3a16a6b42 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -55,6 +55,17 @@ export function getter(target: any, prop: string | symbol | number, receiver: an
     }
     return getField(target, prop);
 }
+function getProtoField(protoField: Doc | undefined, prop: string | number, cb?: (field: Field | undefined) => void) {
+    if (!protoField) return undefined;
+    let field = protoField[prop];
+    if (field instanceof Promise) {
+        cb && field.then(cb);
+        return field;
+    } else {
+        cb && cb(field);
+        return field;
+    }
+}
 
 //TODO The callback parameter is never being passed in currently, so we should be able to get rid of it.
 export function getField(target: any, prop: string | number, ignoreProto: boolean = false, callback?: (field: Field | undefined) => void): any {
@@ -65,14 +76,9 @@ export function getField(target: any, prop: string | number, ignoreProto: boolea
     if (field === undefined && !ignoreProto) {
         const proto = getField(target, "proto", true);
         if (proto instanceof Doc) {
-            let field = proto[prop];
-            if (field instanceof Promise) {
-                callback && field.then(callback);
-                return undefined;
-            } else {
-                callback && callback(field);
-                return field;
-            }
+            return getProtoField(proto, prop, callback);
+        } else if (proto instanceof Promise) {
+            return proto.then(async proto => getProtoField(proto, prop, callback));
         }
     }
     callback && callback(field);