From 25293de92f1139e8d2a57766b3158f6afee96be4 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 24 Mar 2022 14:44:14 +0300
Subject: [PATCH] Do not create Animate DOM element until its needed

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/animate/animate.tsx | 6 +++++-
 src/renderer/components/menu/menu.tsx       | 5 ++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/animate/animate.tsx b/src/renderer/components/animate/animate.tsx
index f8bbd9b137..b988f0d219 100644
--- a/src/renderer/components/animate/animate.tsx
+++ b/src/renderer/components/animate/animate.tsx
@@ -90,9 +90,13 @@ export class Animate extends React.Component<AnimateProps> {
       "--leave-duration": `${leaveDuration}ms`,
     } as React.CSSProperties;
 
+    if (!this.isVisible) {
+      return null;
+    }
+
     return React.cloneElement(contentElem, {
       className: cssNames("Animate", name, contentElem.props.className, this.statusClassName),
-      children: this.isVisible ? contentElem.props.children : null,
+      children: contentElem.props.children,
       style: {
         ...contentElem.props.style,
         ...durations,
diff --git a/src/renderer/components/menu/menu.tsx b/src/renderer/components/menu/menu.tsx
index a89841c54c..1d176d0b83 100644
--- a/src/renderer/components/menu/menu.tsx
+++ b/src/renderer/components/menu/menu.tsx
@@ -93,7 +93,6 @@ export class Menu extends React.Component<MenuProps, State> {
       this.opener.addEventListener(this.props.toggleEvent, this.toggle);
       this.opener.addEventListener("keydown", this.onKeyDown);
     }
-    this.elem.addEventListener("keydown", this.onKeyDown);
     window.addEventListener("resize", this.onWindowResize);
     window.addEventListener("click", this.onClickOutside, true);
     window.addEventListener("scroll", this.onScrollOutside, true);
@@ -106,7 +105,6 @@ export class Menu extends React.Component<MenuProps, State> {
       this.opener.removeEventListener(this.props.toggleEvent, this.toggle);
       this.opener.removeEventListener("keydown", this.onKeyDown);
     }
-    this.elem.removeEventListener("keydown", this.onKeyDown);
     window.removeEventListener("resize", this.onWindowResize);
     window.removeEventListener("click", this.onClickOutside, true);
     window.removeEventListener("scroll", this.onScrollOutside, true);
@@ -218,7 +216,7 @@ export class Menu extends React.Component<MenuProps, State> {
     }
   }
 
-  onKeyDown(evt: KeyboardEvent) {
+  onKeyDown(evt: React.KeyboardEvent | KeyboardEvent) {
     if (!this.isOpen) return;
 
     switch (evt.code) {
@@ -330,6 +328,7 @@ export class Menu extends React.Component<MenuProps, State> {
               left: this.state?.menuStyle?.left,
               top: this.state?.menuStyle?.top,
             }}
+            onKeyDown={this.onKeyDown}
           >
             {menuItems}
           </ul>