more refactoring ...

src/public/javascripts/widgets/basic_widget.js

@@ -8,20 +8,18 @@ class BasicWidget {
     }
 
     render() {
-        const $widget = $('<div>').attr('id', this.widgetId);
-
         // actual rendering is async
-        this.doRender($widget);
+        const $widget = this.doRender();
+
+//        $widget.attr('id', this.widgetId);
 
         return $widget;
     }
 
     /**
      * for overriding
-     *
-     * @param {JQuery} $widget
      */
-    async doRender($widget) {}
+    doRender() {}
 
     eventReceived(name, data) {
         const fun = this[name + 'Listener'];

src/public/javascripts/widgets/global_buttons.js

@@ -25,8 +25,8 @@ const WIDGET_TPL = `
 `;
 
 class GlobalButtonsWidget extends BasicWidget {
-    async doRender($widget) {
-        $widget.append($(WIDGET_TPL));
+    doRender($widget) {
+        $widget = $(WIDGET_TPL);
 
         const $createTopLevelNoteButton = $widget.find(".create-top-level-note-button");
         const $collapseTreeButton = $widget.find(".collapse-tree-button");
@@ -37,6 +37,8 @@ class GlobalButtonsWidget extends BasicWidget {
         $collapseTreeButton.on('click', () => this.trigger('collapseTree'));
         $scrollToActiveNoteButton.on('click', () => appContext.getMainNoteTree().scrollToActiveNote());
         $toggleSearchButton.on('click', () => this.trigger('toggleSearch'));
+
+        return $widget;
     }
 }
 

src/public/javascripts/widgets/note_title.js

@@ -98,8 +98,8 @@ export default class NoteTitleWidget extends TabAwareWidget {
         this.tree = null;
     }
 
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TPL);
 
         this.$noteTitle = this.$tabContent.find(".note-title");
         this.$noteTitleRow = this.$tabContent.find(".note-title-row");
@@ -140,6 +140,8 @@ export default class NoteTitleWidget extends TabAwareWidget {
                 return false; // to not propagate the enter into the editor (causes issues with codemirror)
             });
         }
+
+        return $widget;
     }
 
     async activeTabChanged() {

src/public/javascripts/widgets/note_tree.js

@@ -15,18 +15,18 @@ import ws from "../services/ws.js";
 import appContext from "../services/app_context.js";
 
 const TPL = `
-<style>
-.tree {
-    overflow: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 60%;
-    font-family: var(--tree-font-family);
-    font-size: var(--tree-font-size);
-}
-</style>
-
-<div class="tree"></div>
+<div class="tree">
+    <style>
+    .tree {
+        overflow: auto;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 60%;
+        font-family: var(--tree-font-family);
+        font-size: var(--tree-font-size);
+    }
+    </style>
+</div>
 `;
 
 export default class NoteTreeWidget extends BasicWidget {
@@ -36,14 +36,9 @@ export default class NoteTreeWidget extends BasicWidget {
         this.tree = null;
     }
 
-    async doRender($widget) {
-        $widget.append($(TPL));
-
-        const $tree = $widget.find('.tree');
-
-        const treeData = await treeService.loadTreeData();
-
-        await this.initFancyTree($tree, treeData);
+    doRender() {
+        const $widget = $(TPL);
+        const $tree = $widget;
 
         $tree.on("click", ".unhoist-button", hoistedNoteService.unhoist);
         $tree.on("click", ".refresh-search-button", searchNotesService.refreshSearch);
@@ -63,6 +58,10 @@ export default class NoteTreeWidget extends BasicWidget {
                 e.preventDefault();
             }
         });
+
+        treeService.loadTreeData().then(treeData => this.initFancyTree($tree, treeData));
+
+        return $widget;
     }
 
     async initFancyTree($tree, treeData) {

src/public/javascripts/widgets/note_type.js

@@ -35,8 +35,8 @@ const TPL = `
 `;
 
 export default class NoteTypeWidget extends TabAwareWidget {
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TPL);
 
         $widget.find('.note-type').on('show.bs.dropdown', () => this.renderDropdown());
 

src/public/javascripts/widgets/search_box.js

@@ -57,8 +57,8 @@ const TPL = `
 </div>`;
 
 export default class SearchBoxWidget extends BasicWidget {
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TPL);
 
         this.$searchBox = $widget.find(".search-box");
         this.$closeSearchButton = $widget.find(".close-search-button");
@@ -86,6 +86,8 @@ export default class SearchBoxWidget extends BasicWidget {
         this.$saveSearchButton.on('click', () => this.saveSearch());
 
         this.$closeSearchButton.on('click', () => this.hideSearchListener());
+
+        return $widget;
     }
 
     doSearch(searchText) {

src/public/javascripts/widgets/search_results.js

@@ -28,11 +28,13 @@ const TPL = `
 `;
 
 export default class SearchResultsWidget extends BasicWidget {
-    async doRender($widget) {
-        $widget.append($(TPL));
+    doRender() {
+        const $widget = $(TPL);
 
         this.$searchResults = $widget.find(".search-results");
         this.$searchResultsInner = $widget.find(".search-results-inner");
+
+        return $widget;
     }
 
     async searchForResultsListener({searchText}) {