Merge branch 'master' into sophie-ai-images

1 files changed, 24 insertions, 8 deletions

diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index bdc074e0c..adccc9db6 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -6,6 +6,7 @@ import { Doc } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { StrCast } from '../../../fields/Types';
 import { Networking } from '../../Network';
+import { DocumentManager } from '../../util/DocumentManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
 import './LoadingBox.scss';
@@ -36,32 +37,47 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(LoadingBox, fieldKey);
     }
+    // removes from currently loading display
+    public static removeCurrentlyLoading(doc: Doc) {
+        if (DocumentManager.Instance.CurrentlyLoading) {
+            const index = DocumentManager.Instance.CurrentlyLoading.indexOf(doc);
+            runInAction(() => index !== -1 && DocumentManager.Instance.CurrentlyLoading.splice(index, 1));
+        }
+    }
+
+    // adds doc to currently loading display
+    public static addCurrentlyLoading(doc: Doc) {
+        if (DocumentManager.Instance.CurrentlyLoading.indexOf(doc) === -1) {
+            runInAction(() => DocumentManager.Instance.CurrentlyLoading.push(doc));
+        }
+    }
 
     _timer: any;
     @observable progress = '';
     componentDidMount() {
-        if (!Doc.CurrentlyLoading?.includes(this.rootDoc)) {
-            this.rootDoc.loadingError = 'Upload interrupted, please try again';
+        if (!DocumentManager.Instance.CurrentlyLoading?.includes(this.Document)) {
+            this.Document.loadingError = 'Upload interrupted, please try again';
         } else {
             const updateFunc = async () => {
-                const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc[Id])); // We use the guid of the overwriteDoc to track file uploads.
+                const result = await Networking.QueryYoutubeProgress(StrCast(this.Document[Id])); // We use the guid of the overwriteDoc to track file uploads.
                 runInAction(() => (this.progress = result.progress));
-                !this.rootDoc.loadingError && (this._timer = setTimeout(updateFunc, 1000));
+                !this.Document.loadingError && this._timer && (this._timer = setTimeout(updateFunc, 1000));
             };
             this._timer = setTimeout(updateFunc, 1000);
         }
     }
     componentWillUnmount() {
         clearTimeout(this._timer);
+        this._timer = undefined;
     }
 
     render() {
         return (
-            <div className="loadingBoxContainer" style={{ background: !this.rootDoc.loadingError ? '' : 'red' }}>
+            <div className="loadingBoxContainer" style={{ background: !this.Document.loadingError ? '' : 'red' }}>
                 <div className="loadingBox-textContainer">
-                    <span className="loadingBox-title">{StrCast(this.rootDoc.title)}</span>
-                    <p className="loadingBox-headerText">{StrCast(this.rootDoc.loadingError, 'Loading ' + (this.progress.replace('[download]', '') || '(can take several minutes)'))}</p>
-                    {this.rootDoc.loadingError ? null : (
+                    <span className="loadingBox-title">{StrCast(this.Document.title)}</span>
+                    <p className="loadingBox-headerText">{StrCast(this.Document.loadingError, 'Loading ' + (this.progress.replace('[download]', '') || '(can take several minutes)'))}</p>
+                    {this.Document.loadingError ? null : (
                         <div className="loadingBox-spinner">
                             <ReactLoading type="spinningBubbles" color="blue" height={100} width={100} />
                         </div>