From a2b2d3f0bba50a4515ea0f8237048edad572fc40 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Wed, 12 Jan 2022 11:42:36 -0600
Subject: [PATCH] fix: issue when creating new note in new tag doesnt re-render
 immediately

---
 .../ui_models/app_state/notes_view_state.ts           |  9 +++++++--
 app/assets/javascripts/ui_models/application.ts       | 11 +++++++++++
 app/assets/javascripts/ui_models/application_group.ts |  1 +
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
index 319e6d07b..dda719f08 100644
--- a/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/notes_view_state.ts
@@ -333,9 +333,14 @@ export class NotesViewState {
     if (this.isFiltering) {
       title = this.noteFilterText;
     }
+
     await this.appState.openNewNote(title);
-    this.reloadNotes();
-    this.appState.noteTags.reloadTags();
+    this.application.performFunctionWithAngularDigestCycleAfterAsyncChange(
+      () => {
+        this.reloadNotes();
+        this.appState.noteTags.reloadTags();
+      }
+    );
   };
 
   createPlaceholderNote = () => {
diff --git a/app/assets/javascripts/ui_models/application.ts b/app/assets/javascripts/ui_models/application.ts
index 96c24ccc0..26dfd7838 100644
--- a/app/assets/javascripts/ui_models/application.ts
+++ b/app/assets/javascripts/ui_models/application.ts
@@ -43,6 +43,7 @@ export class WebApplication extends SNApplication {
     platform: Platform,
     identifier: string,
     private $compile: angular.ICompileService,
+    private $timeout: angular.ITimeoutService,
     scope: angular.IScope,
     defaultSyncServerHost: string,
     public bridge: Bridge,
@@ -104,6 +105,16 @@ export class WebApplication extends SNApplication {
     this.webServices = services;
   }
 
+  /**
+   * If a UI change is made in an async function, Angular might not re-render the change.
+   * Use this function to force re-render the UI after an async function has made UI changes.
+   */
+  public performFunctionWithAngularDigestCycleAfterAsyncChange(
+    func: () => void
+  ) {
+    this.$timeout(func);
+  }
+
   public getAppState(): AppState {
     return this.webServices.appState;
   }
diff --git a/app/assets/javascripts/ui_models/application_group.ts b/app/assets/javascripts/ui_models/application_group.ts
index 5b422a569..f732adadc 100644
--- a/app/assets/javascripts/ui_models/application_group.ts
+++ b/app/assets/javascripts/ui_models/application_group.ts
@@ -61,6 +61,7 @@ export class ApplicationGroup extends SNApplicationGroup {
       platform,
       descriptor.identifier,
       this.$compile,
+      this.$timeout,
       scope,
       this.defaultSyncServerHost,
       this.bridge,