From a47728188f4554f4ee722c44c243c1885b0554a9 Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 1 Feb 2022 09:41:32 -0600
Subject: [PATCH] fix: prevent component viewer double reload

---
 .../components/ComponentView/index.tsx        |  4 +--
 .../components/NoteView/NoteView.tsx          | 28 +++++++++++++------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/components/ComponentView/index.tsx b/app/assets/javascripts/components/ComponentView/index.tsx
index 9f4931465..25da0d34a 100644
--- a/app/assets/javascripts/components/ComponentView/index.tsx
+++ b/app/assets/javascripts/components/ComponentView/index.tsx
@@ -29,7 +29,7 @@ interface IProps {
   application: WebApplication;
   appState: AppState;
   componentViewer: ComponentViewer;
-  requestReload?: (viewer: ComponentViewer) => void;
+  requestReload?: (viewer: ComponentViewer, force?: boolean) => void;
   onLoad?: (component: SNComponent) => void;
   manualDealloc?: boolean;
 }
@@ -206,7 +206,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
           <IssueOnLoading
             componentName={component.name}
             reloadIframe={() => {
-              reloadValidityStatus(), requestReload?.(componentViewer);
+              reloadValidityStatus(), requestReload?.(componentViewer, true);
             }}
           />
         )}
diff --git a/app/assets/javascripts/components/NoteView/NoteView.tsx b/app/assets/javascripts/components/NoteView/NoteView.tsx
index 6f08de9d6..59fd2d317 100644
--- a/app/assets/javascripts/components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/components/NoteView/NoteView.tsx
@@ -101,6 +101,7 @@ export const reloadFont = (monospaceFont?: boolean) => {
 type State = {
   availableStackComponents: SNComponent[];
   editorComponentViewer?: ComponentViewer;
+  editorComponentViewerDidAlreadyReload?: boolean;
   editorStateDidLoad: boolean;
   editorTitle: string;
   editorText: string;
@@ -445,17 +446,26 @@ export class NoteView extends PureComponent<Props, State> {
   }
 
   public editorComponentViewerRequestsReload = async (
-    viewer: ComponentViewer
+    viewer: ComponentViewer,
+    force?: boolean
   ): Promise<void> => {
+    if (this.state.editorComponentViewerDidAlreadyReload && !force) {
+      return;
+    }
     const component = viewer.component;
     this.application.componentManager.destroyComponentViewer(viewer);
-    this.setState({
-      editorComponentViewer: undefined,
-    });
-    this.setState({
-      editorComponentViewer: this.createComponentViewer(component),
-      editorStateDidLoad: true,
-    });
+    this.setState(
+      {
+        editorComponentViewer: undefined,
+        editorComponentViewerDidAlreadyReload: true,
+      },
+      () => {
+        this.setState({
+          editorComponentViewer: this.createComponentViewer(component),
+          editorStateDidLoad: true,
+        });
+      }
+    );
   };
 
   /**
@@ -1288,7 +1298,7 @@ export class NoteView extends PureComponent<Props, State> {
                   return (
                     <div className="component-view component-stack-item">
                       <ComponentView
-                        key={viewer.componentUuid}
+                        key={viewer.identifier}
                         componentViewer={viewer}
                         manualDealloc={true}
                         application={this.application}