first changes

11 files changed, 141 insertions, 59 deletions

diff --git a/src/Main.tsx b/src/Main.tsx
index 247733d3a..de4a1de5d 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -51,7 +51,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     schemaDocs[4].SetFieldValue(KS.Author, "Bob", TextField);
     schemaDocs.push(doc2);
     const doc7 = Documents.SchemaDocument(schemaDocs)
-    const docset = [doc1, doc2, doc3, doc7];
+    const docset = [doc3]; // [doc1, doc2, doc3, doc7];
     let doc4 = Documents.CollectionDocument(docset, {
         x: 0, y: 400, title: "mini collection"
     });
@@ -73,7 +73,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     // mainNodes.Data.push(doc5);
     // mainNodes.Data.push(doc1);
     //mainNodes.Data.push(doc2);
-    mainNodes.Data.push(doc6);
+    //mainNodes.Data.push(doc6);
     mainContainer.SetField(KeyStore.Data, mainNodes);
 }
 //);
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index ef759615b..0356959a5 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,30 +1,61 @@
-import { Field, Cast, Opt } from "./Field"
+import { Field, Cast, Opt, Waiting, WAITING } from "./Field"
 import { Key, KeyStore } from "./Key"
 import { NumberField } from "./NumberField";
-import { ObservableMap, computed } from "mobx";
+import { ObservableMap, computed, action, observable } from "mobx";
 import { TextField } from "./TextField";
 import { ListField } from "./ListField";
 
 export class Document extends Field {
-    private fields: ObservableMap<Key, Field> = new ObservableMap();
+    private fields: ObservableMap<Key, Opt<Field>> = new ObservableMap();
+    private _sfields: ObservableMap<Key, Field> = new ObservableMap();
 
     static _untitledDocName = "<untitled>";
     @computed
     public get Title() { return this.GetFieldValue(KeyStore.Title, TextField, Document._untitledDocName); }
 
+    @action
+    DeferredSetField(key: Key) {
+        var sfield = this._sfields.get(key);
+        if (sfield != undefined)
+            this.fields.set(key, sfield);
+    }
+
+    @observable
     GetField(key: Key, ignoreProto: boolean = false): Opt<Field> {
+        if (KeyStore.X == key) {
+            console.log("");
+        }
         let field: Opt<Field>;
         if (ignoreProto) {
             if (this.fields.has(key)) {
+                if (KeyStore.X == key) {
+                    console.log("");
+                }
                 field = this.fields.get(key);
+            } else {
+                field = WAITING;
+                var me = this;
+                setTimeout(function () {
+                    me.DeferredSetField(key);
+                }, 100)
             }
         } else {
             let doc: Opt<Document> = this;
-            while (doc && !(doc.fields.has(key))) {
-                doc = doc.GetPrototype();
+            while (doc && doc != WAITING) {
+                if (!(doc.fields.has(key))) {
+                    var me = this;
+                    setTimeout(function () {
+                        me.DeferredSetField(key);
+                    }, 1000)
+                    doc = doc.GetPrototype();
+                } else
+                    break;
             }
 
-            if (doc) {
+            if (doc && doc != WAITING) {
+                if (KeyStore.X == key) {
+                    console.log("");
+                }
                 field = doc.fields.get(key);
             }
         }
@@ -32,13 +63,19 @@ export class Document extends Field {
         return field;
     }
 
+    @observable
     GetFieldT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): Opt<T> {
-        return Cast(this.GetField(key, ignoreProto), ctor);
+        var getfield = this.GetField(key, ignoreProto);
+        if (getfield != WAITING) {
+            return Cast(this.GetField(key, ignoreProto), ctor);
+        }
+        return WAITING;
     }
 
+    @observable
     GetFieldOrCreate<T extends Field>(key: Key, ctor: { new(): T }, ignoreProto: boolean = false): T {
         const field = this.GetFieldT(key, ctor, ignoreProto);
-        if (field) {
+        if (field && field != WAITING) {
             return field;
         }
         const newField = new ctor();
@@ -46,26 +83,33 @@ export class Document extends Field {
         return newField;
     }
 
+    @observable
     GetFieldValue<T, U extends { Data: T }>(key: Key, ctor: { new(): U }, defaultVal: T): T {
         let val = this.GetField(key);
         let vval = (val && val instanceof ctor) ? val.Data : defaultVal;
         return vval;
     }
 
+    @observable
     GetNumberField(key: Key, defaultVal: number): number {
         return this.GetFieldValue(key, NumberField, defaultVal);
     }
 
+    @observable
     GetTextField(key: Key, defaultVal: string): string {
         return this.GetFieldValue(key, TextField, defaultVal);
     }
 
+    @observable
     GetListField<T extends Field>(key: Key, defaultVal: T[]): T[] {
         return this.GetFieldValue<T[], ListField<T>>(key, ListField, defaultVal)
     }
 
     SetField(key: Key, field: Field | undefined): void {
         if (field) {
+            if (KeyStore.X == key) {
+                console.log("");
+            }
             this.fields.set(key, field);
         } else {
             this.fields.delete(key);
@@ -73,18 +117,31 @@ export class Document extends Field {
     }
 
     SetFieldValue<T extends Field>(key: Key, value: any, ctor: { new(): T }): boolean {
-        let field = this.GetField(key, true);
-        if (field != null) {
-            return field.TrySetValue(value);
+        if (KeyStore.X == key) {
+            console.log("");
+        }
+        let field = new ctor();
+        if (field.TrySetValue(value)) {
+            this._sfields.set(key, field);
+            return true;
         } else {
-            field = new ctor();
-            if (field.TrySetValue(value)) {
-                this.SetField(key, field);
-                return true;
-            } else {
-                return false;
-            }
+            return false;
         }
+
+        // let field = this.GetField(key, true);
+        // if (field == WAITING)
+        //     return true;
+        // if (field != null) {
+        //     return field.TrySetValue(value);
+        // } else {
+        //     field = new ctor();
+        //     if (field.TrySetValue(value)) {
+        //         this.SetField(key, field);
+        //         return true;
+        //     } else {
+        //         return false;
+        //     }
+        // }
     }
 
     GetPrototype(): Opt<Document> {
@@ -94,7 +151,7 @@ export class Document extends Field {
     GetAllPrototypes(): Document[] {
         let protos: Document[] = [];
         let doc: Opt<Document> = this;
-        while (doc != null) {
+        while (doc && doc != WAITING) {
             protos.push(doc);
             doc = doc.GetPrototype();
         }
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 1453e52a4..7f057afa8 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -10,7 +10,9 @@ export function Cast<T extends Field>(field: Opt<Field>, ctor: { new(): T }): Op
     return undefined;
 }
 
-export type Opt<T> = T | undefined;
+export type Waiting = "<Waiting>";
+export type Opt<T> = T | undefined | Waiting;
+export let WAITING: Waiting = "<Waiting>";
 
 export abstract class Field {
     //FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>();
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index 92b5e563c..51e2cfbbc 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -15,6 +15,7 @@ import * as GoldenLayout from "golden-layout";
 import * as ReactDOM from 'react-dom';
 import { DragManager } from "../../util/DragManager";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { WAITING } from "../../fields/Field";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -69,6 +70,8 @@ export class CollectionDockingView extends CollectionViewBase {
 
     @action
     onResize = (event: any) => {
+        if (this.props.ContainingDocumentView == WAITING)
+            return;
         var cur = this.props.ContainingDocumentView!.MainContent.current;
 
         // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
@@ -217,7 +220,7 @@ export class CollectionDockingView extends CollectionViewBase {
                 CollectionDockingView.myLayout._maximizedStack = stack;
                 CollectionDockingView.myLayout._maxstack = stack.header.controlsContainer.find('.lm_maximise');
             }
-            stack.header.controlsContainer.find('.lm_popout').hide();
+            //stack.header.controlsContainer.find('.lm_popout').hide();
             stack.header.controlsContainer.find('.lm_close') //get the close icon
                 .off('click') //unbind the current click handler
                 .click(function () {
@@ -252,6 +255,8 @@ export class CollectionDockingView extends CollectionViewBase {
 
 
     render() {
+        if (this.props.ContainingDocumentView == WAITING)
+            return;
         const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
         const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
         // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index cc907b2cc..2c10c8056 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -13,6 +13,7 @@ import "./CollectionFreeFormView.scss";
 import { Utils } from "../../Utils";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
 import { SelectionManager } from "../../util/SelectionManager";
+import { WAITING } from "../../fields/Field";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -32,21 +33,23 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const doc = de.data["document"];
         var me = this;
         if (doc instanceof CollectionFreeFormDocumentView) {
-            if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
+            if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this && doc.props.ContainingCollectionView != WAITING) {
                 doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
                 this.addDocument(doc.props.Document);
             }
             const xOffset = de.data["xOffset"] as number || 0;
             const yOffset = de.data["yOffset"] as number || 0;
             const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
-            let sscale = this.props.ContainingDocumentView!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1))
-            const screenX = de.x - xOffset;
-            const screenY = de.y - yOffset;
-            const docX = (screenX - translateX) / sscale / scale;
-            const docY = (screenY - translateY) / sscale / scale;
-            doc.x = docX;
-            doc.y = docY;
-            this.bringToFront(doc);
+            if (this.props.ContainingDocumentView != WAITING) {
+                let sscale = this.props.ContainingDocumentView!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1))
+                const screenX = de.x - xOffset;
+                const screenY = de.y - yOffset;
+                const docX = (screenX - translateX) / sscale / scale;
+                const docY = (screenY - translateY) / sscale / scale;
+                doc.x = docX;
+                doc.y = docY;
+                this.bringToFront(doc);
+            }
         }
         e.stopPropagation();
     }
@@ -91,7 +94,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         var me = this;
         var act = me.active;
         var title = me.props.DocumentForCollection.Title;
-        if (!e.cancelBubble && this.active) {
+        if (!e.cancelBubble && this.active && this.props.ContainingDocumentView != WAITING) {
             e.preventDefault();
             e.stopPropagation();
             let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
@@ -108,6 +111,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
 
+        if (this.props.ContainingDocumentView == WAITING)
+            return;
         let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
 
         var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
@@ -142,11 +147,13 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     x: x, y: y
                 })
                 let docs = that.props.DocumentForCollection.GetFieldT(KeyStore.Data, ListField);
-                if (!docs) {
-                    docs = new ListField<Document>();
-                    that.props.DocumentForCollection.SetField(KeyStore.Data, docs)
+                if (docs != WAITING) {
+                    if (!docs) {
+                        docs = new ListField<Document>();
+                        that.props.DocumentForCollection.SetField(KeyStore.Data, docs)
+                    }
+                    docs.Data.push(doc);
                 }
-                docs.Data.push(doc);
             }
         }), false)
 
diff --git a/src/views/collections/CollectionViewBase.tsx b/src/views/collections/CollectionViewBase.tsx
index 76145f12b..e00a29978 100644
--- a/src/views/collections/CollectionViewBase.tsx
+++ b/src/views/collections/CollectionViewBase.tsx
@@ -1,7 +1,7 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../fields/Document";
-import { Opt } from "../../fields/Field";
+import { Opt, WAITING } from "../../fields/Field";
 import { Key, KeyStore } from "../../fields/Key";
 import { ListField } from "../../fields/ListField";
 import { SelectionManager } from "../../util/SelectionManager";
@@ -30,9 +30,10 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
     public get active(): boolean {
         var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
         var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
-        var topMost = this.props.ContainingDocumentView != undefined && (
-            this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
-            this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
+        var topMost = this.props.ContainingDocumentView != undefined &&
+            this.props.ContainingDocumentView != WAITING && this.props.ContainingDocumentView.props.ContainingCollectionView != WAITING && (
+                this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
+                this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
         return isSelected || childSelected || topMost;
     }
     @action
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
index ebe6d411c..08068b384 100644
--- a/src/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu";
 import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
+import { WAITING } from "../../fields/Field";
 
 
 @observer
@@ -84,7 +85,8 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     @computed
     get active(): boolean {
-        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
+        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
+            (this.props.ContainingCollectionView != WAITING && this.props.ContainingCollectionView!.active);
     }
 
     @computed
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index a1262e2ba..334ea1cb2 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -1,7 +1,7 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../fields/Document";
-import { Opt } from "../../fields/Field";
+import { Opt, WAITING } from "../../fields/Field";
 import { Key, KeyStore } from "../../fields/Key";
 import { ListField } from "../../fields/ListField";
 import { NumberField } from "../../fields/NumberField";
@@ -49,7 +49,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     //
     @computed
     public get ScalingToScreenSpace(): number {
-        if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
+        if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != WAITING &&
+            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != WAITING) {
             let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
             return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
         }
@@ -62,7 +63,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     public TransformToLocalPoint(screenX: number, screenY: number) {
         // if this collection view is nested within another collection view, then 
         // first transform the screen point into the parent collection's coordinate space.
-        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
+        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != WAITING &&
+            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != WAITING ?
             this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
             { LocalX: screenX, LocalY: screenY };
         let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
@@ -111,8 +113,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
         // if this collection view is nested within another collection view, then 
         // first transform the local point into the parent collection's coordinate space.
-        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
-        if (containingDocView != undefined) {
+        let containingDocView = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView != WAITING ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
+        if (containingDocView != undefined && containingDocView != WAITING) {
             let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
             let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
             let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
@@ -134,7 +136,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             bindings.DocumentView = this;
         for (const key of this.layoutFields) {
             let field = doc.GetField(key);
-            if (field) {
+            if (field && field != WAITING) {
                 bindings[key.Name] = field.GetValue();
             }
         }
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index 2a2355a23..7c81ac55e 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -2,7 +2,7 @@ import React = require("react")
 import { Document } from "../../fields/Document";
 import { observer } from "mobx-react";
 import { computed } from "mobx";
-import { Field, Opt } from "../../fields/Field";
+import { Field, Opt, WAITING } from "../../fields/Field";
 import { TextField } from "../../fields/TextField";
 import { NumberField } from "../../fields/NumberField";
 import { RichTextField } from "../../fields/RichTextField";
@@ -47,9 +47,10 @@ export class FieldView extends React.Component<FieldViewProps> {
         }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
-        } else {
+        } else if (field != WAITING) {
             return <p>{field.GetValue}</p>
-        }
+        } else
+            return <p> {"Waiting for server..."} </p>
     }
 
 }
\ No newline at end of file
diff --git a/src/views/nodes/FormattedTextBox.tsx b/src/views/nodes/FormattedTextBox.tsx
index 9c4b24226..f0385c096 100644
--- a/src/views/nodes/FormattedTextBox.tsx
+++ b/src/views/nodes/FormattedTextBox.tsx
@@ -5,7 +5,7 @@ import { keymap } from "prosemirror-keymap";
 import { schema } from "prosemirror-schema-basic";
 import { EditorState, Transaction } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Opt } from "../../fields/Field";
+import { Opt, WAITING } from "../../fields/Field";
 import { SelectionManager } from "../../util/SelectionManager";
 import "./FormattedTextBox.scss";
 import React = require("react")
@@ -46,7 +46,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     }
 
     dispatchTransaction = (tx: Transaction) => {
-        if (this._editorView) {
+        if (this._editorView && this._editorView != WAITING) {
             const state = this._editorView.state.apply(tx);
             this._editorView.updateState(state);
             const { doc, fieldKey } = this.props;
@@ -67,7 +67,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         };
 
         let field = doc.GetFieldT(fieldKey, RichTextField);
-        if (field) {
+        if (field && field != WAITING) {  // bcz: don't think this works
             state = EditorState.fromJSON(config, JSON.parse(field.Data));
         } else {
             state = EditorState.create(config);
@@ -81,19 +81,19 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
 
         this._reactionDisposer = reaction(() => {
             const field = this.props.doc.GetFieldT(this.props.fieldKey, RichTextField);
-            return field ? field.Data : undefined;
+            return field && field != WAITING ? field.Data : undefined;
         }, (field) => {
-            if (field && this._editorView) {
+            if (field && this._editorView && this._editorView != WAITING) {
                 this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
             }
         })
     }
 
     componentWillUnmount() {
-        if (this._editorView) {
+        if (this._editorView && this._editorView != WAITING) {
             this._editorView.destroy();
         }
-        if (this._reactionDisposer) {
+        if (this._reactionDisposer && this._reactionDisposer != WAITING) {
             this._reactionDisposer();
         }
     }
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index dd201f20f..65a3b7437 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -7,6 +7,7 @@ import React = require("react")
 import { ImageField } from '../../fields/ImageField';
 import { FieldViewProps, FieldView } from './FieldView';
 import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
+import { WAITING } from '../../fields/Field';
 
 interface ImageBoxState {
     photoIndex: number,
@@ -62,7 +63,11 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
         let field = this.props.doc.GetFieldT(this.props.fieldKey, ImageField);
         let path = "";
         if (field) {
-            path = field.Data.href;
+            if (field === WAITING) {
+                path = "https://image.flaticon.com/icons/svg/66/66163.svg"
+            } else {
+                path = field.Data.href;
+            }
         }
         const images = [path,];
         var lightbox = () => {