2 files changed, 39 insertions, 0 deletions
diff --git a/src/fields/FieldLoader.scss b/src/fields/FieldLoader.scss
new file mode 100644
index 000000000..123488c7d
--- /dev/null
+++ b/src/fields/FieldLoader.scss
@@ -0,0 +1,12 @@
+.fieldLoader {
+    z-index: 10000;
+    width: 200px;
+    height: 50;
+    background: white;
+    position: absolute;
+    left: calc(50% - 99px);
+    top: calc(50% + 99px);
+    display: flex;
+    align-items: center;
+    padding: 20px;
+}
diff --git a/src/fields/FieldLoader.tsx b/src/fields/FieldLoader.tsx
new file mode 100644
index 000000000..36dca89f2
--- /dev/null
+++ b/src/fields/FieldLoader.tsx
@@ -0,0 +1,27 @@
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+
+import * as React from 'react';
+import './FieldLoader.scss';
+
+@observer
+export class FieldLoader extends React.Component {
+    @observable public static ServerLoadStatus = { requested: 0, retrieved: 0 };
+    public static active = false;
+
+    render() {
+        return (
+            <div
+                className="fieldLoader"
+                style={{
+                    zIndex: 10000,
+                    margin: 'auto',
+                    width: 200,
+                    height: 75,
+                    background: 'lightblue',
+                    display: 'block',
+                    position: 'absolute',
+                }}>{`Requested: ${FieldLoader.ServerLoadStatus.requested} ... ${FieldLoader.ServerLoadStatus.retrieved} `}</div>
+        );
+    }
+}