added splash ui for document loading.

5 files changed, 58 insertions, 7 deletions

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index ddc4318aa..0da4dc08d 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -2,6 +2,7 @@ import { runInAction } from 'mobx';
 import * as rp from 'request-promise';
 import * as io from 'socket.io-client';
 import { Doc, Opt, UpdatingFromServer } from '../fields/Doc';
+import { FieldLoader } from '../fields/FieldLoader';
 import { HandleUpdate, Id, Parent } from '../fields/FieldSymbols';
 import { ObjectField } from '../fields/ObjectField';
 import { RefField } from '../fields/RefField';
@@ -352,23 +353,30 @@ export namespace DocServer {
             // fields for the given ids. This returns a promise, which, when resolved, indicates that all the JSON serialized versions of
             // the fields have been returned from the server
             console.log('Requesting ' + requestedIds.length + ' fields');
+            FieldLoader.active && runInAction(() => (FieldLoader.ServerLoadStatus.requested = requestedIds.length));
             const getSerializedFields: Promise<any> = Utils.EmitCallback(_socket, MessageStore.GetRefFields, requestedIds);
 
             // 3) when the serialized RefFields have been received, go head and begin deserializing them into objects.
             // Here, once deserialized, we also invoke .proto to 'load' the documents' prototypes, which ensures that all
             // future .proto calls on the Doc won't have to go farther than the cache to get their actual value.
 
+            let retrieved = 0;
             const fields: { [id: string]: RefField } = {};
             await getSerializedFields.then(async fieldvals => {
                 console.log('deserializing ' + fieldvals.length + ' fields');
                 const proms: Promise<void>[] = [];
-                runInAction(() => {
+                await runInAction(async () => {
                     for (const field of fieldvals) {
                         const cached = _cache[field.id];
                         if (!cached) {
+                            retrieved++;
+                            if (FieldLoader.active && retrieved % 150 === 0) {
+                                runInAction(() => (FieldLoader.ServerLoadStatus.retrieved = retrieved));
+                                await new Promise(res => setTimeout(res));
+                            }
                             console.log('<');
                             // deserialize
-                            const prom = SerializationHelper.Deserialize(field).then(deserialized => {
+                            const prom = SerializationHelper.Deserialize(field).then(async deserialized => {
                                 fields[field.id] = deserialized;
 
                                 //overwrite or delete any promises (that we inserted as flags
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 76e01120f..635980e03 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1,15 +1,14 @@
-import { forOwn } from "lodash";
 import { reaction } from "mobx";
 import * as rp from 'request-promise';
 import { Doc, DocListCast, DocListCastAsync, Opt } from "../../fields/Doc";
-import { Id } from "../../fields/FieldSymbols";
+import { FieldLoader } from "../../fields/FieldLoader";
 import { InkTool } from "../../fields/InkField";
 import { List } from "../../fields/List";
 import { PrefetchProxy } from "../../fields/Proxy";
 import { RichTextField } from "../../fields/RichTextField";
 import { listSpec } from "../../fields/Schema";
-import { ComputedField, ScriptField } from "../../fields/ScriptField";
-import { Cast, DateCast, DocCast, PromiseValue, StrCast } from "../../fields/Types";
+import { ScriptField } from "../../fields/ScriptField";
+import { Cast, DateCast, DocCast, StrCast } from "../../fields/Types";
 import { nullAudio } from "../../fields/URLField";
 import { SetCachedGroups, SharingPermissions } from "../../fields/util";
 import { GestureUtils } from "../../pen-gestures/GestureUtils";
@@ -868,10 +867,12 @@ export class CurrentUserUtils {
                 if (result.cacheDocumentIds) 
                 {
                     const ids = result.cacheDocumentIds.split(";");
-                    const batch = 10000;
+                    const batch = 30000;
+                    FieldLoader.active = true;
                     for (let i = 0; i < ids.length; i = Math.min(ids.length, i+batch)) {
                         await DocServer.GetRefFields(ids.slice(i, i+batch));
                     }
+                    FieldLoader.active = false;
                 }
                 return result;
             } else {
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index f327f3184..e0b4c5159 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -5,6 +5,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { AssignAllExtensions } from '../../extensions/General/Extensions';
+import { FieldLoader } from '../../fields/FieldLoader';
 import { DocServer } from '../DocServer';
 import { Docs } from '../documents/Documents';
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
@@ -17,9 +18,11 @@ import * as dotenv from 'dotenv'; // see https://github.com/motdotla/dotenv#how-
 dotenv.config();
 
 AssignAllExtensions();
+FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0 }; // bcz: not sure why this is needed to get the code loaded properly...
 
 (async () => {
     MainView.Live = window.location.search.includes('live');
+    ReactDOM.createRoot(document.getElementById('root')!).render(<FieldLoader />);
     window.location.search.includes('safe') && CollectionView.SetSafeMode(true);
     const info = await CurrentUserUtils.loadCurrentUser();
     if (info.email === 'guest') DocServer.Control.makeReadOnly();
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>
+        );
+    }
+}