fixes to note loading. Sidebar flickers way less after note change

src/public/javascripts/services/attributes.js

@@ -268,6 +268,10 @@ class Attributes {
     }
 
     eventReceived(name, data) {
+        if (!this.ctx.note) {
+            return;
+        }
+
         if (name === 'syncData') {
             if (data.find(sd => sd.entityName === 'attributes' && sd.noteId === this.ctx.note.noteId)) {
                 this.reloadAttributes();

src/public/javascripts/services/note_detail.js

@@ -374,20 +374,11 @@ tabRow.addListener('activeTabChange', async ({ detail }) => {
 tabRow.addListener('tabRemove', async ({ detail }) => {
     const tabId = detail.tabEl.getAttribute('data-tab-id');
 
-    const tabContextToDelete = tabContexts.find(nc => nc.tabId === tabId);
-
-    if (tabContextToDelete) {
-        // sometimes there are orphan autocompletes after closing the tab
-        tabContextToDelete.closeAutocomplete();
-
-        await tabContextToDelete.saveNoteIfChanged();
-        tabContextToDelete.$tabContent.remove();
-    }
+    tabContexts.filter(nc => nc.tabId === tabId)
+        .forEach(tc => tc.remove());
 
     tabContexts = tabContexts.filter(nc => nc.tabId !== tabId);
 
-    console.log(`Removed tab ${tabId}`);
-
     if (tabContexts.length === 0) {
         openEmptyTab();
     }

src/public/javascripts/services/sidebar.js

@@ -59,7 +59,6 @@ class Sidebar {
         }
 
         this.widgets = [];
-        this.$widgetContainer.empty();
 
         const widgetClasses = (await Promise.all([
             import("../widgets/note_info.js"),
@@ -95,15 +94,19 @@ class Sidebar {
 
         this.widgets.sort((a, b) => a.getPosition() < b.getPosition() ? -1 : 1);
 
+        const widgetsToAppend = [];
+
         for (const widget of this.widgets) {
             try {
                 const $el = await widget.render();
-                this.$widgetContainer.append($el);
+                widgetsToAppend.push($el);
             }
             catch (e) {
                 ws.logError(`Error while rendering widget ${widget.widgetName}: ${e.message}`);
             }
         }
+
+        this.$widgetContainer.empty().append(...widgetsToAppend);
     }
 
     eventReceived(name, data) {

src/public/javascripts/services/tab_context.js

@@ -112,6 +112,10 @@ class TabContext {
         this.$unprotectButton = this.$tabContent.find(".unprotect-button");
         this.$unprotectButton.click(protectedSessionService.unprotectNoteAndSendToServer);
 
+        await this.initComponent();
+    }
+
+    async initComponent() {
         const type = this.getComponentType();
 
         if (!(type in this.components)) {
@@ -122,19 +126,15 @@ class TabContext {
     }
 
     async setNote(note, notePath) {
-        this.noteId = note.noteId;
-        this.notePath = notePath;
         /** @property {NoteFull} */
         this.note = note;
-        this.tabRow.updateTab(this.$tab[0], {title: note.title});
+        this.notePath = notePath;
+        this.tabRow.updateTab(this.$tab[0], {title: this.note.title});
 
         if (!this.initialized) {
             return;
         }
 
-        // after loading new note make sure editor is scrolled to the top
-        this.getComponent().scrollToTop();
-
         this.setupClasses();
 
         this.setCurrentNotePathToHash();
@@ -149,6 +149,9 @@ class TabContext {
             this.noteChangeDisabled = false;
         }
 
+        // after loading new note make sure editor is scrolled to the top
+        this.getComponent().scrollToTop();
+
         this.setTitleBar();
 
         this.closeAutocomplete(); // esp. on windows autocomplete is not getting closed automatically
@@ -157,7 +160,7 @@ class TabContext {
             // we include the note into recent list only if the user stayed on the note at least 5 seconds
             if (notePath && notePath === this.notePath) {
                 await server.post('recent-notes', {
-                    noteId: this.noteId,
+                    noteId: this.note.noteId,
                     notePath: this.notePath
                 });
             }
@@ -192,6 +195,9 @@ class TabContext {
             if (this.note) {
                 await this.setNote(this.note, this.notePath);
             }
+            else {
+                await this.renderComponent(); // render empty page
+            }
         }
 
         this.$tabContent.show();
@@ -201,6 +207,8 @@ class TabContext {
     }
 
     async renderComponent() {
+        await this.initComponent()
+
         for (const componentType in this.components) {
             if (componentType !== this.getComponentType()) {
                 this.components[componentType].cleanup();
@@ -426,6 +434,14 @@ class TabContext {
         }
     }
 
+    async remove() {
+        // sometimes there are orphan autocompletes after closing the tab
+        this.closeAutocomplete();
+
+        await this.saveNoteIfChanged();
+        this.$tabContent.remove();
+    }
+
     closeAutocomplete() {
         if (utils.isDesktop()) {
             this.$tabContent.find('.aa-input').autocomplete('close');