display error instead of infinitely loading after refresh

4 files changed, 36 insertions, 1 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 14e6fe5bb..4f652b6e4 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1758,7 +1758,7 @@ export namespace DocUtils {
         const full = { ...options, _width: 400, title: name };
         const pathname = Utils.prepend(result.accessPaths.agnostic.client);
         const doc = await DocUtils.DocumentFromType(type, pathname, full, rootDoc);
-        rootDoc && (rootDoc.isLoading = undefined);
+        rootDoc && (rootDoc.isLoading = undefined) && Doc.removeCurrentlyLoading(rootDoc);
         if (doc) {
             const proto = Doc.GetProto(doc);
             proto.text = result.rawText;
@@ -1840,6 +1840,7 @@ export namespace DocUtils {
                 if (overwriteDoc) {
                     overwriteDoc.isLoading = false;
                     overwriteDoc.errorMessage = (result as any).message;
+                    Doc.removeCurrentlyLoading(overwriteDoc);
                 }
             } else name && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
         });
@@ -1868,6 +1869,7 @@ export namespace DocUtils {
                 if (overwriteDoc) {
                     overwriteDoc.isLoading = false;
                     overwriteDoc.errorMessage = (result as any).message;
+                    Doc.removeCurrentlyLoading(overwriteDoc);
                 }
             } else name && type && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
         });
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 7fc1a800b..3ae965af0 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -465,12 +465,14 @@ export function CollectionSubView<X>(moreProps?: X) {
                 const loading = Docs.Create.LoadingDocument(files, options);
                 generatedDocuments.push(loading);
                 loading.isLoading = true;
+                Doc.addCurrentlyLoading(loading);
                 DocUtils.uploadYoutubeVideoLoading(files, {}, loading);
             } else {
                 generatedDocuments.push(
                     ...files.map(file => {
                         const loading = Docs.Create.LoadingDocument(file, options);
                         loading.isLoading = true;
+                        Doc.addCurrentlyLoading(loading);
                         DocUtils.uploadFileToDoc(file, {}, loading);
                         return loading;
                     })
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index acf728ebb..220cd0880 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -1,6 +1,8 @@
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
+import { Doc } from '../../../fields/Doc';
 import { StrCast } from '../../../fields/Types';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
@@ -33,6 +35,13 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return FieldView.LayoutString(LoadingBox, fieldKey);
     }
 
+    componentDidMount() {
+        if (!Doc.CurrentlyLoading || !Doc.CurrentlyLoading.includes(this.rootDoc)) {
+            this.rootDoc.isLoading = false;
+            this.rootDoc.errorMessage = 'Upload was interrupted, please try again';
+        }
+    }
+
     render() {
         return (
             <div className="loadingBoxContainer" style={{ background: this.rootDoc.isLoading ? '' : 'red' }}>
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index cf505c45b..74a3d8cf2 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -149,6 +149,28 @@ export class Doc extends RefField {
     public static set MainDocId(id: string | undefined) {
         this.mainDocId = id;
     }
+
+    @observable public static CurrentlyLoading: Doc[];
+    // removes from currently loading display
+    @action
+    public static removeCurrentlyLoading(doc: Doc) {
+        if (Doc.CurrentlyLoading) {
+            const index = Doc.CurrentlyLoading.indexOf(doc);
+            index !== -1 && Doc.CurrentlyLoading.splice(index, 1);
+        }
+    }
+
+    // adds doc to currently loading display
+    @action
+    public static addCurrentlyLoading(doc: Doc) {
+        if (!Doc.CurrentlyLoading) {
+            Doc.CurrentlyLoading = [];
+        }
+        if (Doc.CurrentlyLoading.indexOf(doc) === -1) {
+            Doc.CurrentlyLoading.push(doc);
+        }
+    }
+
     @observable public static GuestDashboard: Doc | undefined;
     @observable public static GuestTarget: Doc | undefined;
     @observable public static GuestMobile: Doc | undefined;