From d1b829ebe855aa02bb77e7a389df7b6c9d1ae230 Mon Sep 17 00:00:00 2001
From: Dmitry Vasilev <dmitry.vasil@gmail.com>
Date: Sun, 15 Jan 2023 22:00:49 +0800
Subject: [PATCH] show loading indicator

---
 index.html       |  6 +++++
 src/editor/ui.js | 64 +++++++++++++++++++++++++++++++-----------------
 src/effects.js   |  3 +--
 3 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 8e5fd17..8612e0b 100644
--- a/index.html
+++ b/index.html
@@ -152,6 +152,12 @@
         flex-direction: column;
       }
 
+      .debugger_wrapper {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+      }
+
       .debugger, .problems {
         padding: 5px;
         overflow: auto;
diff --git a/src/editor/ui.js b/src/editor/ui.js
index e2fbf11..a4eed0a 100644
--- a/src/editor/ui.js
+++ b/src/editor/ui.js
@@ -27,29 +27,32 @@ export class UI {
           : (this.eval_container = el('div', {class: 'eval'})),
         el('div', 'bottom', 
           this.debugger_container = el('div', 'debugger',
-            el('div', 'tabs', 
-              this.tabs.calltree = el('div', 'tab', 
-                el('a', {
-                  click: () => this.set_active_tab('calltree'),
-                  href: 'javascript: void(0)',
-                }, 'Call tree (F2)')
+            this.debugger_loaded = el('div', 'debugger_wrapper', 
+              el('div', 'tabs', 
+                this.tabs.calltree = el('div', 'tab', 
+                  el('a', {
+                    click: () => this.set_active_tab('calltree'),
+                    href: 'javascript: void(0)',
+                  }, 'Call tree (F2)')
+                ),
+                this.tabs.logs = el('div', 'tab', 
+                  el('a', {
+                    click: () => this.set_active_tab('logs'),
+                    href: 'javascript: void(0)',
+                  }, 'Logs (F3)')
+                ),
+                this.entrypoint_select = el('div', 'entrypoint_select')
               ),
-              this.tabs.logs = el('div', 'tab', 
-                el('a', {
-                  click: () => this.set_active_tab('logs'),
-                  href: 'javascript: void(0)',
-                }, 'Logs (F3)')
-              ),
-              this.entrypoint_select = el('div', 'entrypoint_select')
+              this.debugger.calltree = el('div', {
+                'class': 'tab_content', 
+                tabindex: 0,
+              }),
+              this.debugger.logs = el('div', {
+                'class': 'tab_content logs', 
+                tabindex: 0,
+              }),
             ),
-            this.debugger.calltree = el('div', {
-              'class': 'tab_content', 
-              tabindex: 0,
-            }),
-            this.debugger.logs = el('div', {
-              'class': 'tab_content logs', 
-              tabindex: 0,
-            }),
+            this.debugger_loading = el('div', 'debugger_wrapper')
           ),
           this.problems_container = el('div', {"class": 'problems', tabindex: 0}),
         ),
@@ -253,8 +256,23 @@ export class UI {
   render_debugger(state) {
     this.debugger_container.style = ''
     this.problems_container.style = 'display: none'
-    this.calltree.render_calltree(state)
-    this.logs.render_logs(null, state.logs)
+    if(
+      state.loading_external_imports_state != null
+      ||
+      state.eval_modules_state != null
+    ) {
+      this.debugger_loaded.style = 'display: none'
+      this.debugger_loading.innerText = 
+        state.loading_external_imports_state != null
+          ? 'Loading external modules...'
+          : 'Waiting...'
+      this.debugger_loading.style = ''
+    } else {
+      this.debugger_loading.style = 'display: none'
+      this.debugger_loaded.style = ''
+      this.calltree.render_calltree(state)
+      this.logs.render_logs(null, state.logs)
+    }
   }
 
   render_problems(problems) {
diff --git a/src/effects.js b/src/effects.js
index 16212d6..ffe8bbc 100644
--- a/src/effects.js
+++ b/src/effects.js
@@ -202,8 +202,7 @@ export const render_common_side_effects = (prev, next, command, ui) => {
       next.eval_modules_state != null
   ) {
 
-    // TODO if loading external imports, show loading indicator
-    ui.calltree.clear_calltree()
+    ui.render_debugger(next)
     ui.editor.for_each_session((file, session) => clear_coloring(ui, file))
 
   } else {