[Enhancement] (Map Control) use lazy tippy to improve map legend rend…

…ering perf (#1924)

src/components/map/lazy-tippy.tsx

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import React, {useState, forwardRef} from 'react';
+import Tippy from '@tippyjs/react/headless';
+import {isTest} from 'utils/utils';
+
+const isTestEnv = isTest();
+
+/**
+ * Lazy mounting tippy content
+ * https://gist.github.com/atomiks/520f4b0c7b537202a23a3059d4eec908
+ */
+// eslint-disable-next-line react/display-name
+const LazyTippy = forwardRef((props, ref) => {
+  const [mounted, setMounted] = useState(isTestEnv);
+
+  const lazyPlugin = {
+    fn: () => ({
+      onMount: () => setMounted(true),
+      onHidden: () => setMounted(false)
+    })
+  };
+
+  const computedProps = {...props};
+
+  computedProps.plugins = [lazyPlugin, ...(props.plugins || [])];
+
+  if (props.render) {
+    computedProps.render = (...args) => (mounted ? props.render(...args) : '');
+  } else {
+    computedProps.content = mounted ? props.content : '';
+  }
+
+  return <Tippy {...computedProps} ref={ref} />;
+});
+
+export default LazyTippy;

src/components/map/map-legend-panel.tsx

@@ -26,7 +26,7 @@ import {MapControlButton} from 'components/common/styled-components';
 import MapControlTooltipFactory from './map-control-tooltip';
 import MapControlPanelFactory from './map-control-panel';
 import MapLegendFactory from './map-legend';
-import Tippy from '@tippyjs/react/headless';
+import LazyTippy from './lazy-tippy';
 import {createPortal} from 'react-dom';
 import {DIMENSIONS} from '@kepler.gl/constants';
 import {MapControl, MapControls} from 'reducers';
@@ -131,11 +131,12 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
     return (
       // The outer div is to prevent an accessibility warning from Tippy
       <div>
-        <Tippy
+        {/* 
+  // @ts-ignore */}
+        <LazyTippy
           interactive={true}
           trigger="click"
           placement="left-start"
-          // @ts-ignore
           onCreate={setTippyInstance}
           render={attrs => <div {...attrs}>{mapControlPanel}</div>}
           appendTo={document.body}
@@ -147,7 +148,7 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
               </MapControlButton>
             </MapControlTooltip>
           </div>
-        </Tippy>
+        </LazyTippy>
       </div>
     );
   };

test/browser/components/map/map-control-test.js

@@ -138,7 +138,7 @@ test('MapControlFactory - click options', t => {
         <MapContainer {...mapContainerProps} />
       </IntlWrapper>
     );
-  }, 'MapCnotainer should not fail without props');
+  }, 'MapContainer should not fail without props');
 
   // layer selector is not active
   t.equal(wrapper.find(MapControlButton).length, 6, 'Should show 5 MapControlButton');
@@ -221,7 +221,7 @@ test('MapControlFactory - show panels', t => {
         <MapContainer {...mapContainerProps} />
       </IntlWrapper>
     );
-  }, 'MapCnotainer should not fail without props');
+  }, 'MapContainer should not fail without props');
 
   // show legend
   t.equal(wrapper.find(MapLegend).length, 1, 'should render 1 MapLegend');