Fix room list being laggy while scrolling 🐌

src/components/views/elements/Tooltip.tsx

@@ -98,6 +98,8 @@ export default class Tooltip extends React.Component<ITooltipProps> {
         });
     }
 
+    // Add the parent's position to the tooltips, so it's correctly
+    // positioned, also taking into account any window zoom
     private updatePosition(style: CSSProperties) {
         const parentBox = this.parent.getBoundingClientRect();
         let offset = 0;
@@ -155,11 +157,12 @@ export default class Tooltip extends React.Component<ITooltipProps> {
     }
 
     private renderTooltip = () => {
-        // Add the parent's position to the tooltips, so it's correctly
-        // positioned, also taking into account any window zoom
-        // NOTE: The additional 6 pixels for the left position, is to take account of the
-        // tooltips chevron
-        const style = this.updatePosition({});
+        let style: CSSProperties = {};
+        // When the tooltip is hidden, no need to thrash the DOM with `style`
+        // attribute updates (performance)
+        if (this.props.visible) {
+            style = this.updatePosition({});
+        }
         // Hide the entire container when not visible. This prevents flashing of the tooltip
         // if it is not meant to be visible on first mount.
         style.display = this.props.visible ? "block" : "none";

src/components/views/elements/TooltipTarget.tsx

@@ -44,6 +44,19 @@ const TooltipTarget: React.FC<IProps> = ({
     const show = () => setIsVisible(true);
     const hide = () => setIsVisible(false);
 
+    // No need to fill up the DOM with hidden tooltip elements. Only add the
+    // tooltip when we're hovering over the item (performance)
+    const tooltip = isVisible && <Tooltip
+        id={id}
+        className={className}
+        tooltipClassName={tooltipClassName}
+        label={label}
+        yOffset={yOffset}
+        alignment={alignment}
+        visible={isVisible}
+        maxParentWidth={maxParentWidth}
+    />;
+
     return (
         <div
             tabIndex={0}
@@ -56,16 +69,7 @@ const TooltipTarget: React.FC<IProps> = ({
             {...rest}
         >
             { children }
-            <Tooltip
-                id={id}
-                className={className}
-                tooltipClassName={tooltipClassName}
-                label={label}
-                yOffset={yOffset}
-                alignment={alignment}
-                visible={isVisible}
-                maxParentWidth={maxParentWidth}
-            />
+            { tooltip }
         </div>
     );
 };

test/components/views/elements/TooltipTarget-test.tsx

@@ -39,7 +39,9 @@ describe('<TooltipTarget />', () => {
     afterEach(() => {
         // clean up visible tooltips
         const tooltipWrapper = document.querySelector('.mx_Tooltip_wrapper');
-        document.body.removeChild(tooltipWrapper);
+        if (tooltipWrapper) {
+            document.body.removeChild(tooltipWrapper);
+        }
     });
 
     it('renders container', () => {

test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap

@@ -22,8 +22,5 @@ exports[`<TooltipTarget /> renders container 1`] = `
   <span>
     child
   </span>
-  <div
-    class="test className"
-  />
 </div>
 `;