Add loading indicator

src/public/app/services/note_context.js

@@ -32,6 +32,14 @@ class NoteContext extends Component {
         });
     }
 
+    setLoading() {
+        this.notePath = null;
+        this.noteId = null;
+        this.parentNoteId = null;
+
+        this.triggerEvent('noteLoading');
+    }
+
     async setNote(inputNotePath, triggerSwitchEvent = true) {
         const resolvedNotePath = await this.getResolvedNotePath(inputNotePath);
 

src/public/app/widgets/note_detail.js

@@ -21,6 +21,7 @@ import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
 import NoneTypeWidget from "./type_widgets/none.js";
 import attributeService from "../services/attributes.js";
 import NoteMapTypeWidget from "./type_widgets/note_map.js";
+import LoadingTypeWidget from "./type_widgets/loading.js";
 
 const TPL = `
 <div class="note-detail">
@@ -47,7 +48,8 @@ const typeWidgetClasses = {
     'relation-map': RelationMapTypeWidget,
     'protected-session': ProtectedSessionTypeWidget,
     'book': BookTypeWidget,
-    'note-map': NoteMapTypeWidget
+    'note-map': NoteMapTypeWidget,
+    'loading': LoadingTypeWidget,
 };
 
 export default class NoteDetailWidget extends NoteContextAwareWidget {
@@ -196,6 +198,21 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         }
     }
 
+    async noteLoadingEvent() {
+        const widget = new LoadingTypeWidget();
+        widget.spacedUpdate = this.spacedUpdate;
+        widget.setParent(this);
+
+        const $renderedWidget = widget.render();
+        this.$widget.empty();
+        this.$widget.append($renderedWidget);
+
+        console.log(this, this.$widget);
+        this.$widget.append($renderedWidget);
+
+        this.child(widget);
+    }
+
     async beforeTabRemoveEvent({ntxIds}) {
         if (this.isNoteContext(ntxIds)) {
             await this.spacedUpdate.updateNowIfNecessary();

src/public/app/widgets/note_tree.js

@@ -328,19 +328,11 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 }
             },
             activate: async (event, data) => {
-                // click event won't propagate so let's close context menu manually
-                contextMenu.hide();
-
-                this.clearSelectedNodes();
-
                 const notePath = treeService.getNotePath(data.node);
 
                 const activeNoteContext = appContext.tabManager.getActiveContext();
+                activeNoteContext.setLoading();
                 await activeNoteContext.setNote(notePath);
-
-                if (utils.isMobile()) {
-                    this.triggerCommand('setActiveScreen', {screen: 'detail'});
-                }
             },
             expand: (event, data) => this.setExpanded(data.node.data.branchId, true),
             collapse: (event, data) => this.setExpanded(data.node.data.branchId, false),

src/public/app/widgets/type_widgets/loading.js

@@ -0,0 +1,17 @@
+import TypeWidget from "./type_widget.js";
+
+const TPL = `
+<div class="note-loading note-detail-printable">
+    <h1>Note is loading...</h1>
+</div>`;
+
+
+export default class LoadingTypeWidget extends TypeWidget {
+    static getType() { return "loading"; }
+
+    doRender() {
+        this.$widget = $(TPL);
+
+        super.doRender();
+    }
+}