diff options
| -rw-r--r-- | src/client/DocServer.ts | 12 | ||||
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 11 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 3 | ||||
| -rw-r--r-- | src/fields/FieldLoader.scss | 12 | ||||
| -rw-r--r-- | src/fields/FieldLoader.tsx | 27 |
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> + ); + } +} |