wip

Author: AndrewMusgrave

polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx

@@ -8,6 +8,7 @@ import React, {
   ReactNode,
 } from 'react';
 
+import {debounce} from '../../../../utilities/debounce';
 import {useI18n} from '../../../../utilities/i18n';
 import {classNames} from '../../../../utilities/css';
 import {RowContext} from '../../../../utilities/index-table';
@@ -60,16 +61,18 @@ export function CheckboxWrapper({children}: CheckboxWrapperProps) {
   const {position} = useContext(RowContext);
   const checkboxNode = useRef<HTMLTableDataCellElement>(null);
 
-  const handleResize = useCallback(() => {
-    if (position !== 0) return;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleResize = useCallback(
+    debounce(() => {
+      if (position !== 0) return;
 
-    requestAnimationFrame(() => {
       if (!checkboxNode.current) return;
 
       const {width} = checkboxNode.current.getBoundingClientRect();
       setRootProperty('--pc-checkbox-offset', `${width}px`);
-    });
-  }, [position]);
+    }),
+    [position],
+  );
 
   useEffect(() => {
     handleResize();