From a5bf418707321711559782f0348063681c553cbb Mon Sep 17 00:00:00 2001
From: Naafiyan Ahmed <naafiyan@gmail.com>
Date: Wed, 10 Aug 2022 16:11:23 -0400
Subject: added placeholder text box for files being uploaded

---
 src/client/views/collections/CollectionSubView.tsx | 43 +++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 5479929bd..35a14704d 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -448,6 +448,46 @@ export function CollectionSubView<X>(moreProps?: X) {
             }
             this.slowLoadDocuments(files, options, generatedDocuments, text, completed, e.clientX, e.clientY, addDocument).then(batch.end);
         }
+
+        /**
+         * Creates a placeholder doc view for files being uploaded and removes placeholder docs once files are uplodaded.
+         *
+         * @param files the files to upload that we want to create placeholders for
+         * @param options the document options (primarily the x and y coordinates to put doc)
+         * @param text in the case of youtube the text is the url to the video
+         * @returns a disposer action that removes the placeholders created after files get uploaded
+         */
+        placeHolderDisposer = (files: File[] | string, options: DocumentOptions, text: string) => {
+            // TODO: nda - create a specialized view for placeholder upload with a spinner and ability to retry upload
+            let placeholders: Doc[] = [];
+            // handle yt case
+            if (typeof files === 'string') {
+                placeholders.push(Docs.Create.TextDocument('Loading: ' + text, { ...options, title: text, _width: 500, _height: 200 }));
+            } else {
+                // every other doc type is an array of File
+
+                // Get the file names as a text
+                let textStr = '';
+                files.forEach(file => {
+                    textStr += file.name + '\n';
+                });
+                placeholders.push(Docs.Create.TextDocument('Loading: \n' + textStr, { ...options, title: files.length + ' files', _width: 500, _height: files.length * 40 }));
+            }
+            // disposer action to remove placeholders once files are uploaded
+            const remove = action(() => {
+                if (!this.props.DataDoc) {
+                    return;
+                }
+                for (let i = 0; i < placeholders.length; i++) {
+                    Doc.RemoveDocFromList(this.props.DataDoc, 'data', placeholders[i]);
+                }
+            });
+            placeholders.forEach(pl => {
+                this.addDocument(pl);
+            });
+            return remove;
+        };
+
         slowLoadDocuments = async (
             files: File[] | string,
             options: DocumentOptions,
@@ -458,7 +498,8 @@ export function CollectionSubView<X>(moreProps?: X) {
             clientY: number,
             addDocument: (doc: Doc | Doc[]) => boolean
         ) => {
-            const disposer = OverlayView.Instance.addElement(<ReactLoading type={'spinningBubbles'} color={'green'} height={250} width={250} />, { x: clientX - 125, y: clientY - 125 });
+            const disposer = this.placeHolderDisposer(files, options, text);
+            // const disposer = OverlayView.Instance.addElement(<ReactLoading type={'spinningBubbles'} color={'green'} height={250} width={250} />, { x: clientX - 125, y: clientY - 125 });
             if (typeof files === 'string') {
                 generatedDocuments.push(...(await DocUtils.uploadYoutubeVideo(files, options)));
             } else {
-- 
cgit v1.2.3-70-g09d2