Do not render Tooltip and Menu elements until needed (#5168)

* Clean up Menu DOM elements

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up Tooltip DOM

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Do not render Animate when not in need

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Update snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* clean up <Animate/> and <Tooltip/>

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Roman <ixrock@gmail.com>

src/renderer/components/animate/animate.tsx

@@ -83,19 +83,23 @@ export class Animate extends React.Component<AnimateProps> {
   }
 
   render() {
+    if (!this.isVisible) {
+      return null;
+    }
+
     const { name, enterDuration, leaveDuration } = this.props;
     const contentElem = this.contentElem;
-    const durations = {
+    const cssVarsForAnimation = {
       "--enter-duration": `${enterDuration}ms`,
       "--leave-duration": `${leaveDuration}ms`,
     } as React.CSSProperties;
 
     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,
+        ...cssVarsForAnimation,
       },
     });
   }