From 7aaddce6411004b6a7481c910fd8b3fb953ecfb1 Mon Sep 17 00:00:00 2001
From: Yogev Ben David <yogev132@gmail.com>
Date: Sun, 17 Apr 2022 13:02:41 +0300
Subject: [PATCH] [Mocks] Postpone component lifecycle events to next loop
 (#7505)

---
 .gitignore                        |  5 ++-
 lib/Mock/Layouts/ComponentNode.ts | 58 +++++++++++++++++--------------
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/.gitignore b/.gitignore
index 17a0296bcb1..e99e3fdaf0c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -240,4 +240,7 @@ website/package-lock.json
 artifacts/
 
 # Navigation mocks
-Mock*
\ No newline at end of file
+lib/Mock/*.js
+lib/Mock/*.d.ts
+Mock.js
+Mock.d.ts
\ No newline at end of file
diff --git a/lib/Mock/Layouts/ComponentNode.ts b/lib/Mock/Layouts/ComponentNode.ts
index 4103e6dcfb1..2660f86f1af 100644
--- a/lib/Mock/Layouts/ComponentNode.ts
+++ b/lib/Mock/Layouts/ComponentNode.ts
@@ -18,43 +18,47 @@ export default class ComponentNode extends ParentNode {
 
   public componentDidAppear() {
     if (this.componentDidMountOnce) {
-      events.invokeComponentWillAppear({
-        componentName: this.data.name,
-        componentId: this.nodeId,
-        componentType: 'Component',
-      });
-      events.invokeComponentDidAppear({
+      setTimeout(() => {
+        events.invokeComponentWillAppear({
+          componentName: this.data.name,
+          componentId: this.nodeId,
+          componentType: 'Component',
+        });
+        events.invokeComponentDidAppear({
+          componentName: this.data.name,
+          componentId: this.nodeId,
+          componentType: 'Component',
+        });
+
+        this.buttonsDidAppear(
+          _.concat(
+            this.data.options.topBar?.rightButtons || [],
+            this.data.options.topBar?.leftButtons || []
+          )
+        );
+        this.titleChanged(undefined, this.data.options.topBar?.title);
+      }, 0);
+    } else {
+      this.componentDidAppearPending = true;
+    }
+  }
+
+  public componentDidDisappear() {
+    setTimeout(() => {
+      events.invokeComponentDidDisappear({
         componentName: this.data.name,
         componentId: this.nodeId,
         componentType: 'Component',
       });
 
-      this.buttonsDidAppear(
+      this.buttonsDidDisappear(
         _.concat(
           this.data.options.topBar?.rightButtons || [],
           this.data.options.topBar?.leftButtons || []
         )
       );
-      this.titleChanged(undefined, this.data.options.topBar?.title);
-    } else {
-      this.componentDidAppearPending = true;
-    }
-  }
-
-  public componentDidDisappear() {
-    events.invokeComponentDidDisappear({
-      componentName: this.data.name,
-      componentId: this.nodeId,
-      componentType: 'Component',
-    });
-
-    this.buttonsDidDisappear(
-      _.concat(
-        this.data.options.topBar?.rightButtons || [],
-        this.data.options.topBar?.leftButtons || []
-      )
-    );
-    this.titleChanged(this.data.options.topBar?.title);
+      this.titleChanged(this.data.options.topBar?.title);
+    }, 0);
   }
 
   titleChanged(oldTitle: any, newTitle?: any) {