fix: dont render unneeded content

Author: astandrik

src/components/HoverPopup/HoverPopup.tsx

@@ -14,7 +14,7 @@ const DEBOUNCE_TIMEOUT = 100;
 
 type HoverPopupProps = {
     children: React.ReactNode;
-    popupContent: React.ReactNode;
+    renderPopupContent: () => React.ReactNode;
     showPopup?: boolean;
     offset?: [number, number];
     anchorRef?: React.RefObject<HTMLElement>;
@@ -26,7 +26,7 @@ type HoverPopupProps = {
 
 export const HoverPopup = ({
     children,
-    popupContent,
+    renderPopupContent,
     showPopup,
     offset,
     anchorRef,
@@ -98,22 +98,24 @@ export const HoverPopup = ({
             <span ref={anchor} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
                 {children}
             </span>
-            <Popup
-                contentClassName={b(null, contentClassName)}
-                anchorRef={anchorRef || anchor}
-                open={open}
-                onMouseEnter={onPopupMouseEnter}
-                onMouseLeave={onPopupMouseLeave}
-                onEscapeKeyDown={onPopupEscapeKeyDown}
-                onBlur={onPopupBlur}
-                placement={placement}
-                hasArrow
-                // bigger offset for easier switching to neighbour nodes
-                // matches the default offset for popup with arrow out of a sense of beauty
-                offset={offset || [0, 12]}
-            >
-                <div onContextMenu={onPopupContextMenu}>{popupContent}</div>
-            </Popup>
+            {open ? (
+                <Popup
+                    contentClassName={b(null, contentClassName)}
+                    anchorRef={anchorRef || anchor}
+                    onMouseEnter={onPopupMouseEnter}
+                    onMouseLeave={onPopupMouseLeave}
+                    onEscapeKeyDown={onPopupEscapeKeyDown}
+                    onBlur={onPopupBlur}
+                    placement={placement}
+                    hasArrow
+                    open
+                    // bigger offset for easier switching to neighbour nodes
+                    // matches the default offset for popup with arrow out of a sense of beauty
+                    offset={offset || [0, 12]}
+                >
+                    <div onContextMenu={onPopupContextMenu}>{renderPopupContent()}</div>
+                </Popup>
+            ) : null}
         </React.Fragment>
     );
 };

src/components/MemoryViewer/MemoryViewer.tsx

@@ -100,7 +100,7 @@ export function MemoryViewer({
 
     return (
         <HoverPopup
-            popupContent={
+            renderPopupContent={() => (
                 <DefinitionList responsive>
                     {memorySegments.map(
                         ({label, value: segmentSize, capacity: segmentCapacity, key}) => (
@@ -132,7 +132,7 @@ export function MemoryViewer({
                         ),
                     )}
                 </DefinitionList>
-            }
+            )}
         >
             <div className={b({theme, status}, className)}>
                 <div className={b('progress-container')}>

src/components/VDisk/VDisk.tsx

@@ -41,7 +41,7 @@ export const VDisk = ({
             showPopup={showPopup}
             onShowPopup={onShowPopup}
             onHidePopup={onHidePopup}
-            popupContent={<VDiskPopup data={data} />}
+            renderPopupContent={() => <VDiskPopup data={data} />}
             offset={[0, 5]}
             delayClose={delayClose}
             delayOpen={delayOpen}

src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx

@@ -86,7 +86,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
 
             return (
                 <HoverPopup
-                    popupContent={<VDiskInfo data={item.SlotData} withTitle />}
+                    renderPopupContent={() => <VDiskInfo data={item.SlotData} withTitle />}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >
@@ -111,7 +111,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
         if (isLogSlot(item)) {
             return (
                 <HoverPopup
-                    popupContent={<LogInfo data={item.SlotData} />}
+                    renderPopupContent={() => <LogInfo data={item.SlotData} />}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >
@@ -134,7 +134,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
         if (isEmptySlot(item)) {
             return (
                 <HoverPopup
-                    popupContent={<EmptySlotInfo data={item.SlotData} />}
+                    renderPopupContent={() => <EmptySlotInfo data={item.SlotData} />}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >

src/containers/Storage/PDisk/PDisk.tsx

@@ -87,7 +87,7 @@ export const PDisk = ({
                 anchorRef={anchorRef}
                 onShowPopup={onShowPopup}
                 onHidePopup={onHidePopup}
-                popupContent={<PDiskPopup data={data} />}
+                renderPopupContent={() => <PDiskPopup data={data} />}
                 delayClose={200}
             >
                 <InternalLink to={pDiskPath} className={b('content')}>