From c2dcb06d23f41623a66510b01507272931ea3e0a Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 24 Mar 2022 13:39:49 +0300
Subject: [PATCH] Do not create tooltip div until it's to be shown

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/tooltip/tooltip.tsx | 27 +++++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx
index 9b753c251a..6d8d6acee9 100644
--- a/src/renderer/components/tooltip/tooltip.tsx
+++ b/src/renderer/components/tooltip/tooltip.tsx
@@ -54,6 +54,7 @@ export class Tooltip extends React.Component<TooltipProps> {
 
   @observable.ref elem: HTMLElement;
   @observable activePosition: TooltipPosition;
+  @observable isNodeRendered = false;
   @observable isVisible = false;
 
   constructor(props: TooltipProps) {
@@ -80,6 +81,10 @@ export class Tooltip extends React.Component<TooltipProps> {
 
   componentDidUpdate() {
     this.refreshPosition();
+
+    // this.isVisible should be updated after Tooltip DOM node rendered
+    // to show opening animation by adding classname
+    this.isVisible = this.isNodeRendered;
   }
 
   componentWillUnmount() {
@@ -89,13 +94,12 @@ export class Tooltip extends React.Component<TooltipProps> {
 
   @boundMethod
   protected onEnterTarget() {
-    this.isVisible = true;
-    this.refreshPosition();
+    this.isNodeRendered = true;
   }
 
   @boundMethod
   protected onLeaveTarget() {
-    this.isVisible = false;
+    this.isNodeRendered = false;
   }
 
   @boundMethod
@@ -103,6 +107,10 @@ export class Tooltip extends React.Component<TooltipProps> {
     const { preferredPositions } = this.props;
     const { elem, targetElem } = this;
 
+    if (!elem) {
+      return;
+    }
+
     let positions = new Set<TooltipPosition>([
       TooltipPosition.RIGHT,
       TooltipPosition.BOTTOM,
@@ -150,6 +158,10 @@ export class Tooltip extends React.Component<TooltipProps> {
   }
 
   protected setPosition(pos: { left: number; top: number }) {
+    if (!this.elem) {
+      return;
+    }
+
     const elemStyle = this.elem.style;
 
     elemStyle.left = `${pos.left}px`;
@@ -216,11 +228,16 @@ export class Tooltip extends React.Component<TooltipProps> {
   render() {
     const { style, formatters, usePortal, children, visible } = this.props;
     const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
-      visible: visible ?? this.isVisible,
+      visible: this.isVisible || visible,
       formatter: !!formatters,
     });
+
+    if (!visible && !this.isNodeRendered) {
+      return null;
+    }
+
     const tooltip = (
-      <div className={className} style={style} ref={this.bindRef}>
+      <div className={className} style={style} ref={this.bindRef} role="tooltip">
         {children}
       </div>
     );