show loading indicator

index.html

@@ -152,6 +152,12 @@
         flex-direction: column;
       }
 
+      .debugger_wrapper {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+      }
+
       .debugger, .problems {
         padding: 5px;
         overflow: auto;

src/editor/ui.js

@@ -27,6 +27,7 @@ export class UI {
           : (this.eval_container = el('div', {class: 'eval'})),
         el('div', 'bottom', 
           this.debugger_container = el('div', 'debugger',
+            this.debugger_loaded = el('div', 'debugger_wrapper', 
               el('div', 'tabs', 
                 this.tabs.calltree = el('div', 'tab', 
                   el('a', {
@@ -51,6 +52,8 @@ export class UI {
                 tabindex: 0,
               }),
             ),
+            this.debugger_loading = el('div', 'debugger_wrapper')
+          ),
           this.problems_container = el('div', {"class": 'problems', tabindex: 0}),
         ),
 
@@ -253,9 +256,24 @@ export class UI {
   render_debugger(state) {
     this.debugger_container.style = ''
     this.problems_container.style = 'display: none'
+    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) {
     this.debugger_container.style = 'display: none'

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.render_debugger(next)
-    ui.calltree.clear_calltree()
     ui.editor.for_each_session((file, session) => clear_coloring(ui, file))
 
   } else {