Show progress bar for file download #288

source/engine/core/taskrunner.js

@@ -59,7 +59,7 @@ export function RunTaskAsync (task)
 {
     setTimeout (() => {
         task ();
-    }, 0);
+    }, 10);
 }
 
 export function RunTasks (count, callbacks)
@@ -81,7 +81,7 @@ export function WaitWhile (expression)
         if (expression ()) {
             setTimeout (() => {
                 Waiter (expression);
-            }, 1);
+            }, 10);
         }
     }
     Waiter (expression);

source/engine/import/importer.js

@@ -114,8 +114,10 @@ export class Importer
             onReady : () => {
                 callbacks.onImportStart ();
                 RunTaskAsync (() => {
+                    this.DecompressArchives (this.fileList, () => {
                         this.ImportLoadedFiles (settings, callbacks);
                     });
+                });
             },
             onFileProgress : callbacks.onFileProgress,
             onFileLoadProgress : callbacks.onFileLoadProgress
@@ -149,11 +151,7 @@ export class Importer
             this.fileList = newFileList;
         }
         this.fileList.GetContent ({
-            onReady : () => {
-                this.DecompressArchives (this.fileList, () => {
-                    callbacks.onReady ();
-                });
-            },
+            onReady : callbacks.onReady,
             onFileProgress : callbacks.onFileProgress,
             onFileLoadProgress : callbacks.onFileLoadProgress
         });

source/website/dialog.js

@@ -135,22 +135,42 @@ export class ProgressDialog extends Dialog
         super ();
         this.SetCloseable (false);
         this.textDiv = null;
+        this.progressDiv = null;
     }
 
     Init (text)
     {
         let contentDiv = this.GetContentDiv ();
         contentDiv.classList.add ('ov_progress');
+        let innerContentDiv = AddDiv (contentDiv, 'ov_progress_inner');
 
-        AddDiv (contentDiv, 'ov_progress_img', '<svg><use href="assets/images/3dviewer_net_logo.svg#logo"></use></svg>');
-        this.textDiv = AddDiv (contentDiv, 'ov_progress_text');
+        AddDiv (innerContentDiv, 'ov_progress_img', '<svg><use href="assets/images/3dviewer_net_logo.svg#logo"></use></svg>');
+        this.textDiv = AddDiv (innerContentDiv, 'ov_progress_text');
         this.SetText (text);
+
+        this.progressDiv = AddDiv (contentDiv, 'ov_progress_bar');
     }
 
     SetText (text)
     {
         this.textDiv.innerHTML = text;
     }
+
+    ResetProgress ()
+    {
+        this.progressDiv.style.width = '0px';
+    }
+
+    SetProgress (ratio)
+    {
+        let progressWidth = 0;
+        if (ratio !== null) {
+            let contentDiv = this.GetContentDiv ();
+            let fullWidth = contentDiv.offsetWidth;
+            progressWidth = ratio * fullWidth;
+        }
+        this.progressDiv.style.width = progressWidth.toString () + 'px';
+    }
 }
 
 export class ButtonDialog extends Dialog

source/website/threemodelloaderui.js

@@ -29,11 +29,18 @@ export class ThreeModelLoaderUI
                 progressDialog.Open ();
             },
             onFileProgress : (current, total) => {
+                progressDialog.SetProgress (null);
                 progressDialog.SetText ('Loading File ' + (current + 1).toString () + '/' + total.toString ());
             },
             onFileLoadProgress : (current, total) => {
+                if (total > 0) {
+                    progressDialog.SetProgress (current / total);
+                } else {
+                    progressDialog.SetProgress (null);
+                }
             },
             onSelectMainFile : (fileNames, selectFile) => {
+                progressDialog.SetProgress (null);
                 progressDialog.Close ();
                 this.modalDialog = this.ShowFileSelectorDialog (fileNames, (index) => {
                     progressDialog.Open ();
@@ -41,9 +48,11 @@ export class ThreeModelLoaderUI
                 });
             },
             onImportStart : () => {
+                progressDialog.SetProgress (null);
                 progressDialog.SetText ('Importing Model');
             },
             onVisualizationStart : () => {
+                progressDialog.SetProgress (null);
                 progressDialog.SetText ('Visualizing Model');
             },
             onModelFinished : (importResult, threeObject) => {

website/css/dialogs.css

@@ -221,11 +221,15 @@ div.ov_progress
 	background: var(--ov_dialog_background_color);
 	text-align: center;
 	width: 400px;
-	padding: 20px;
 	box-shadow: var(--ov_shadow);
 	border-radius: 5px;
 }
 
+div.ov_progress_inner
+{
+	padding: 20px;
+}
+
 div.ov_progress div.ov_progress_img svg
 {
 	width: 80px;
@@ -251,6 +255,13 @@ div.ov_progress div.ov_progress_text
 	text-align: center;
 }
 
+div.ov_progress div.ov_progress_bar
+{
+	background: var(--ov_button_color);
+	width: 0px;
+	height: 3px;
+}
+
 div.ov_snapshot_dialog_left
 {
 	width: 190px;