fix(table): avoid unnecessary re-rendering if TableRowMenu doesn't ex…

…ist (#2630)
mondaycom · Dec 8, 2024 · e8d093e · e8d093e
1 parent b0033f0
commit e8d093e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx b/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx
@@ -47,6 +47,7 @@ const TableRowMenu = forwardRef(
             style={{ top: menuButtonPosition }}
             onMouseEnter={onMouseOverRowMenu}
             onMouseLeave={onMouseLeaveRowMenu}
+            data-row-menu-id={rowId}
           >
             <MenuButton
               id={id}

diff --git a/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx b/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx
@@ -7,6 +7,7 @@ export const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderPr
   const { tableRootRef, hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef, setIsMenuOpen } = value;
   const rowMouseLeaveTimeoutId = useRef<ReturnType<typeof setTimeout>>(null);
   const [menuButtonPosition, setMenuButtonPosition] = useState(0);
+  const hasMenuRef = useRef<boolean | null>(null);
 
   const resetTimeout = useCallback(() => {
     clearTimeout(rowMouseLeaveTimeoutId.current);
@@ -15,12 +16,18 @@ export const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderPr
 
   const onMouseOverRow = useCallback(
     (rowRef: React.RefObject<HTMLDivElement>) => {
-      if (isMenuOpen || hoveredRowRef?.current === rowRef.current) return;
+      if (hasMenuRef.current === false || isMenuOpen || hoveredRowRef?.current === rowRef.current) return;
+
       resetTimeout();
       setHoveredRowRef(rowRef);
       const tableRootTop = tableRootRef.current.getBoundingClientRect().top;
       const rowTop = rowRef.current.getBoundingClientRect().top;
       setMenuButtonPosition(rowTop - tableRootTop);
+      if (hasMenuRef.current === null) {
+        requestAnimationFrame(() => {
+          hasMenuRef.current = !!document?.querySelector(`[data-row-menu-id]`);
+        });
+      }
     },
     [isMenuOpen, hoveredRowRef, resetTimeout, setHoveredRowRef, tableRootRef]
   );