fix: deregister stream observers on editor deinit

app/assets/javascripts/services/preferencesManager.ts

@@ -12,12 +12,12 @@ import {
 export class PreferencesManager extends ApplicationService {
 
   private userPreferences!: SNUserPrefs
+  private loadingPrefs = false;
 
   /** @override */
   async onAppLaunch() {
     super.onAppLaunch();
     this.streamPreferences();
-    this.loadSingleton();
   }
 
   get webApplication() {
@@ -33,19 +33,26 @@ export class PreferencesManager extends ApplicationService {
     );
   }
 
-  async loadSingleton() {
+  private async loadSingleton() {
+    if(this.loadingPrefs) {
+      return;
+    }
+    this.loadingPrefs = true;
     const contentType = ContentType.UserPrefs;
     const predicate = new SNPredicate('content_type', '=', contentType);
+    const previousRef = this.userPreferences;
     this.userPreferences = (await this.application!.singletonManager!.findOrCreateSingleton(
       predicate,
       contentType,
       FillItemContent({})
     )) as SNUserPrefs;
-    this.preferencesDidChange();
-  }
-
-  preferencesDidChange() {
-    this.webApplication.getAppState().setUserPreferences(this.userPreferences);
+    this.loadingPrefs = false;
+    const didChange = !previousRef || (
+      this.userPreferences.lastSyncBegan?.getTime() !== previousRef?.lastSyncBegan?.getTime()
+    )
+    if (didChange) {
+      this.webApplication.getAppState().setUserPreferences(this.userPreferences);
+    }
   }
 
   syncUserPreferences() {

app/assets/javascripts/ui_models/editor.ts

@@ -30,6 +30,15 @@ export class Editor {
     );
   }
 
+  deinit() {
+    this.removeStreamObserver();
+    (this.removeStreamObserver as any) = undefined;
+    this._onNoteChange = undefined;
+    (this.application as any) = undefined;
+    this._onNoteChange = undefined;
+    this._onNoteValueChange = undefined;
+  }
+
   private async handleNoteStream(notes: SNNote[], source?: PayloadSource) {
     /** Update our note object reference whenever it changes */
     const matchingNote = notes.find((item) => {
@@ -63,15 +72,6 @@ export class Editor {
     this.setNote(note as SNNote);
   }
 
-  deinit() {
-    this.removeStreamObserver();
-    (this.removeStreamObserver as any) = undefined;
-    this._onNoteChange = undefined;
-    (this.application as any) = undefined;
-    this._onNoteChange = undefined;
-    this._onNoteValueChange = undefined;
-  }
-
   /**
    * Register to be notified when the editor's note changes.
    */

app/assets/javascripts/views/editor/editor_view.ts

@@ -112,7 +112,10 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
   private removeTrashKeyObserver?: any
   private removeDeleteKeyObserver?: any
   private removeTabObserver?: any
-  private removeComponentObserver: any
+  private removeComponentGroupObserver: any
+
+  private removeTagsObserver!: () => void
+  private removeComponentsObserver!: () => void
 
   prefKeyMonospace: string
   prefKeySpellcheck: string
@@ -140,8 +143,12 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
   }
 
   deinit() {
-    this.removeComponentObserver();
-    this.removeComponentObserver = undefined;
+    this.removeTagsObserver();
+    this.removeComponentsObserver();
+    (this.removeTagsObserver as any) = undefined;
+    (this.removeComponentsObserver as any) = undefined;
+    this.removeComponentGroupObserver();
+    this.removeComponentGroupObserver = undefined;
     this.removeAltKeyObserver();
     this.removeAltKeyObserver = undefined;
     this.removeTrashKeyObserver();
@@ -183,7 +190,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
         this.reloadTagsString();
       }
     });
-    this.removeComponentObserver = this.componentGroup.addChangeObserver(() => {
+    this.removeComponentGroupObserver = this.componentGroup.addChangeObserver(() => {
       this.setEditorState({
         activeEditorComponent: this.componentGroup.activeComponentForArea(ComponentArea.Editor),
         activeTagsComponent: this.componentGroup.activeComponentForArea(ComponentArea.NoteTags),
@@ -336,7 +343,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
   }
 
   streamItems() {
-    this.application.streamItems(
+    this.removeTagsObserver = this.application.streamItems(
       ContentType.Tag,
       (items) => {
         if (!this.note) {
@@ -355,7 +362,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
       }
     );
 
-    this.application.streamItems(
+    this.removeComponentsObserver = this.application.streamItems(
       ContentType.Component,
       async (items) => {
         const components = items as SNComponent[];
@@ -363,7 +370,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
           return;
         }
         /** Reload componentStack in case new ones were added or removed */
-        this.reloadComponentStack();
+        await this.reloadComponentStack();
         /** Observe editor changes to see if the current note should update its editor */
         const editors = components.filter((component) => {
           return component.isEditor();

app/assets/javascripts/views/notes/notes_view.ts

@@ -76,11 +76,8 @@ class NotesViewCtrl extends PureViewCtrl {
 
   $onInit() {
     super.$onInit();
-    angular.element(document).ready(() => {
-      this.reloadPreferences();
-    });
     this.panelPuppet = {
-      onReady: () => this.reloadPreferences()
+      onReady: () => this.reloadPanelWidth()
     };
     this.unsubEditorChange = this.application.editorGroup.addChangeObserver(() => {
       this.setNotesState({
@@ -407,9 +404,27 @@ class NotesViewCtrl extends PureViewCtrl {
       WebPrefKey.NotesHideDate,
       false
     );
+    const state = this.getState();
+    const displayOptionsChanged = (
+      viewOptions.sortBy !== state.sortBy ||
+      viewOptions.sortReverse !== state.sortReverse ||
+      viewOptions.hidePinned !== state.hidePinned ||
+      viewOptions.showArchived !== state.showArchived
+    );
     await this.setNotesState({
       ...viewOptions
     });
+    this.reloadPanelWidth();
+    if (displayOptionsChanged) {
+      this.reloadNotesDisplayOptions();
+    }
+    await this.reloadNotes();
+    if (prevSortValue && prevSortValue !== sortBy) {
+      this.selectFirstNote();
+    }
+  }
+
+  reloadPanelWidth() {
     const width = this.application!.getPrefsService().getValue(
       WebPrefKey.NotesPanelWidth
     );
@@ -422,11 +437,6 @@ class NotesViewCtrl extends PureViewCtrl {
         );
       }
     }
-    this.reloadNotesDisplayOptions();
-    await this.reloadNotes();
-    if (prevSortValue && prevSortValue !== sortBy) {
-      this.selectFirstNote();
-    }
   }
 
   onPanelResize(

app/assets/javascripts/views/tags/tags_view.ts

@@ -45,6 +45,7 @@ class TagsViewCtrl extends PureViewCtrl {
   private editingOriginalName?: string
   formData: { tagTitle?: string } = {}
   titles: Partial<Record<UuidString, string>> = {}
+  private removeTagsObserver!: () => void
 
   /* @ngInject */
   constructor(
@@ -57,6 +58,8 @@ class TagsViewCtrl extends PureViewCtrl {
   }
 
   deinit() {
+    this.removeTagsObserver();
+    (this.removeTagsObserver as any) = undefined;
     this.unregisterComponent();
     this.unregisterComponent = undefined;
     super.deinit();
@@ -112,7 +115,7 @@ class TagsViewCtrl extends PureViewCtrl {
   }
 
   beginStreamingItems() {
-    this.application.streamItems(
+    this.removeTagsObserver = this.application.streamItems(
       ContentType.Tag,
       async (items) => {
         await this.setTagState({