[IndexTable] Improve reflow perf (#6840)

Reduce reflows in index table

Author: AndrewMusgrave

.changeset/dry-trees-double.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Removed additional reflows from IndexTable

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

@@ -82,7 +82,6 @@ export interface TableHeadingRect {
 }
 
 const SCROLL_BAR_PADDING = 4;
-const SIXTY_FPS = 1000 / 60;
 const SCROLL_BAR_DEBOUNCE_PERIOD = 300;
 
 function IndexTableBase({
@@ -179,59 +178,52 @@ function IndexTableBase({
 
   const resizeTableHeadings = useMemo(
     () =>
-      debounce(
-        () => {
-          if (!tableElement.current || !scrollableContainerElement.current) {
-            return;
-          }
+      debounce(() => {
+        if (!tableElement.current || !scrollableContainerElement.current) {
+          return;
+        }
 
-          const boundingRect =
-            scrollableContainerElement.current.getBoundingClientRect();
-          tablePosition.current = {
-            top: boundingRect.top,
-            left: boundingRect.left,
-          };
+        const boundingRect =
+          scrollableContainerElement.current.getBoundingClientRect();
+        tablePosition.current = {
+          top: boundingRect.top,
+          left: boundingRect.left,
+        };
 
-          tableHeadingRects.current = tableHeadings.current.map((heading) => ({
-            offsetWidth: heading.offsetWidth || 0,
-            offsetLeft: heading.offsetLeft || 0,
-          }));
+        tableHeadingRects.current = tableHeadings.current.map((heading) => ({
+          offsetWidth: heading.offsetWidth || 0,
+          offsetLeft: heading.offsetLeft || 0,
+        }));
 
-          if (tableHeadings.current.length === 0) {
-            return;
-          }
+        if (tableHeadings.current.length === 0) {
+          return;
+        }
 
-          // update left offset for first column
-          if (selectable && tableHeadings.current.length > 1)
-            tableHeadings.current[1].style.left = `${tableHeadingRects.current[0].offsetWidth}px`;
+        // update left offset for first column
+        if (selectable && tableHeadings.current.length > 1)
+          tableHeadings.current[1].style.left = `${tableHeadingRects.current[0].offsetWidth}px`;
 
-          // update the min width of the checkbox to be the be the un-padded width of the first heading
-          if (selectable && firstStickyHeaderElement?.current) {
-            const elementStyle = getComputedStyle(tableHeadings.current[0]);
-            const boxWidth = tableHeadings.current[0].offsetWidth;
-            firstStickyHeaderElement.current.style.minWidth = `calc(${boxWidth}px - ${elementStyle.paddingLeft} - ${elementStyle.paddingRight} + 2px)`;
+        // update the min width of the checkbox to be the be the un-padded width of the first heading
+        if (selectable && firstStickyHeaderElement?.current) {
+          const elementStyle = getComputedStyle(tableHeadings.current[0]);
+          const boxWidth = tableHeadings.current[0].offsetWidth;
+          firstStickyHeaderElement.current.style.minWidth = `calc(${boxWidth}px - ${elementStyle.paddingLeft} - ${elementStyle.paddingRight} + 2px)`;
+        }
+
+        // update sticky header min-widths
+        stickyTableHeadings.current.forEach((heading, index) => {
+          let minWidth = 0;
+          if (index === 0 && (!isBreakpointsXS() || !selectable)) {
+            minWidth = calculateFirstHeaderOffset();
+          } else if (selectable && tableHeadingRects.current.length > index) {
+            minWidth = tableHeadingRects.current[index]?.offsetWidth || 0;
+          } else if (!selectable && tableHeadingRects.current.length >= index) {
+            minWidth = tableHeadingRects.current[index - 1]?.offsetWidth || 0;
           }
 
-          // update sticky header min-widths
-          stickyTableHeadings.current.forEach((heading, index) => {
-            let minWidth = 0;
-            if (index === 0 && (!isBreakpointsXS() || !selectable)) {
-              minWidth = calculateFirstHeaderOffset();
-            } else if (selectable && tableHeadingRects.current.length > index) {
-              minWidth = tableHeadingRects.current[index]?.offsetWidth || 0;
-            } else if (
-              !selectable &&
-              tableHeadingRects.current.length >= index
-            ) {
-              minWidth = tableHeadingRects.current[index - 1]?.offsetWidth || 0;
-            }
-
-            heading.style.minWidth = `${minWidth}px`;
-          });
-        },
-        SIXTY_FPS,
-        {leading: true, trailing: true, maxWait: SIXTY_FPS},
-      ),
+          heading.style.minWidth = `${minWidth}px`;
+        });
+      }),
     [calculateFirstHeaderOffset, selectable],
   );
 
@@ -259,21 +251,25 @@ function IndexTableBase({
 
   const [canScrollRight, setCanScrollRight] = useState(true);
 
-  const handleCanScrollRight = useCallback(() => {
-    if (
-      !lastColumnSticky ||
-      !tableElement.current ||
-      !scrollableContainerElement.current
-    ) {
-      return;
-    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleCanScrollRight = useCallback(
+    debounce(() => {
+      if (
+        !lastColumnSticky ||
+        !tableElement.current ||
+        !scrollableContainerElement.current
+      ) {
+        return;
+      }
 
-    const tableRect = tableElement.current.getBoundingClientRect();
-    const scrollableRect =
-      scrollableContainerElement.current.getBoundingClientRect();
+      const tableRect = tableElement.current.getBoundingClientRect();
+      const scrollableRect =
+        scrollableContainerElement.current.getBoundingClientRect();
 
-    setCanScrollRight(tableRect.width > scrollableRect.width);
-  }, [lastColumnSticky]);
+      setCanScrollRight(tableRect.width > scrollableRect.width);
+    }),
+    [lastColumnSticky],
+  );
 
   useEffect(() => {
     handleCanScrollRight();

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';
@@ -58,14 +59,19 @@ interface CheckboxWrapperProps {
 }
 
 export function CheckboxWrapper({children}: CheckboxWrapperProps) {
+  const {position} = useContext(RowContext);
   const checkboxNode = useRef<HTMLTableDataCellElement>(null);
 
-  const handleResize = useCallback(() => {
-    if (!checkboxNode.current) return;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleResize = useCallback(
+    debounce(() => {
+      if (position !== 0 || !checkboxNode.current) return;
 
-    const {width} = checkboxNode.current.getBoundingClientRect();
-    setRootProperty('--pc-checkbox-offset', `${width}px`);
-  }, []);
+      const {width} = checkboxNode.current.getBoundingClientRect();
+      setRootProperty('--pc-checkbox-offset', `${width}px`);
+    }),
+    [position],
+  );
 
   useEffect(() => {
     handleResize();

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

@@ -2,6 +2,7 @@ import React, {ReactElement} from 'react';
 import type {ThenType} from '@shopify/useful-types';
 import {mountWithApp} from 'tests/utilities';
 import type {Element as ElementType} from '@shopify/react-testing';
+import {act} from 'react-dom/test-utils';
 
 import {Checkbox as PolarisCheckbox} from '../../../../Checkbox';
 import {IndexTable, IndexTableProps} from '../../../IndexTable';
@@ -11,6 +12,11 @@ import * as setRootPropertyModule from '../../../../../utilities/set-root-proper
 
 const defaultId = 'id';
 
+jest.mock('../../../../../utilities/debounce', () => ({
+  ...jest.requireActual('../../../../../utilities/debounce'),
+  debounce: (callback: () => void) => () => callback(),
+}));
+
 describe('<Checkbox />', () => {
   let getBoundingClientRectSpy: jest.SpyInstance;
   let setRootPropertySpy: jest.SpyInstance;
@@ -119,24 +125,58 @@ describe('<Checkbox />', () => {
         expect(checkbox).toContainReactComponent(CheckboxWrapper);
       });
 
-      it('sets `--pc-checkbox-offset` custom property', () => {
-        mountWithTable(<Checkbox />, defaultTableProps);
-
-        expect(setRootPropertySpy).toHaveBeenLastCalledWith(
-          '--pc-checkbox-offset',
-          '0px',
-        );
-      });
-
-      it('updates `--pc-checkbox-offset` custom property on resize', () => {
-        mountWithTable(<Checkbox />, defaultTableProps);
-        setGetBoundingClientRect(200);
-        window.dispatchEvent(new Event('resize'));
-
-        expect(setRootPropertySpy).toHaveBeenLastCalledWith(
-          '--pc-checkbox-offset',
-          '200px',
-        );
+      describe('--pc-checkbox-offset', () => {
+        it('sets `--pc-checkbox-offset` custom property when position is 0', () => {
+          mountWithTable(<Checkbox />, {
+            ...defaultTableProps,
+            rowProps: {position: 0},
+          });
+
+          expect(setRootPropertySpy).toHaveBeenLastCalledWith(
+            '--pc-checkbox-offset',
+            '0px',
+          );
+        });
+
+        it('updates `--pc-checkbox-offset` custom property on resize when position is 0', () => {
+          mountWithTable(<Checkbox />, {
+            ...defaultTableProps,
+            rowProps: {position: 0},
+          });
+          setGetBoundingClientRect(200);
+
+          act(() => {
+            window.dispatchEvent(new Event('resize'));
+          });
+
+          expect(setRootPropertySpy).toHaveBeenLastCalledWith(
+            '--pc-checkbox-offset',
+            '200px',
+          );
+        });
+
+        it('does not set `--pc-checkbox-offset` custom property when position is above 1', () => {
+          mountWithTable(<Checkbox />, {
+            ...defaultTableProps,
+            rowProps: {position: 1},
+          });
+
+          expect(setRootPropertySpy).not.toHaveBeenCalled();
+        });
+
+        it('does not update `--pc-checkbox-offset` custom property on resize when position is above 1', () => {
+          mountWithTable(<Checkbox />, {
+            ...defaultTableProps,
+            rowProps: {position: 1},
+          });
+          setGetBoundingClientRect(200);
+
+          act(() => {
+            window.dispatchEvent(new Event('resize'));
+          });
+
+          expect(setRootPropertySpy).not.toHaveBeenCalled();
+        });
       });
 
       it('renders table data', () => {

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

@@ -62,10 +62,11 @@ export const Row = memo(function Row({
     () => ({
       itemId: id,
       selected,
+      position,
       onInteraction: handleInteraction,
       disabled,
     }),
-    [id, selected, disabled, handleInteraction],
+    [id, selected, disabled, position, handleInteraction],
   );
 
   const primaryLinkElement = useRef<HTMLAnchorElement | null>(null);

polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx

@@ -26,6 +26,13 @@ jest.mock('../utilities', () => ({
   getTableHeadingsBySelector: jest.fn(),
 }));
 
+jest.mock('../../../utilities/debounce', () => ({
+  ...jest.requireActual('../../../utilities/debounce'),
+  debounce: (callback: () => void) => () => {
+    callback();
+  },
+}));
+
 const mockTableItems = [
   {
     id: 'item-1',

polaris-react/src/utilities/index-table/context.ts

@@ -4,6 +4,7 @@ interface RowContextType {
   itemId?: string;
   selected?: boolean;
   disabled?: boolean;
+  position?: number;
   onInteraction?: (event: React.MouseEvent | React.KeyboardEvent) => void;
 }