optimize table config

src/renderer/features/shared/components/table-config.tsx

@@ -12,7 +12,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/elem
 import { useDebouncedState } from '@mantine/hooks';
 import clsx from 'clsx';
 import Fuse from 'fuse.js';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './table-config.module.css';
@@ -498,28 +498,22 @@ const TableColumnConfig = ({
 };
 
 const DragHandle = ({ dragHandleRef }: { dragHandleRef: React.RefObject<HTMLButtonElement> }) => {
-    const { t } = useTranslation();
-
     return (
         <ActionIcon
-            icon="dragVertical"
+            icon="dragHorizontal"
             iconProps={{
                 size: 'md',
             }}
             ref={dragHandleRef}
             size="xs"
             style={{ cursor: 'grab' }}
-            tooltip={{
-                label: t('table.config.general.dragToReorder', {
-                    postProcess: 'sentenceCase',
-                }),
-            }}
             variant="transparent"
         />
     );
 };
 
-const TableColumnItem = ({
+const TableColumnItem = memo(
+    ({
         handleAlignCenter,
         handleAlignLeft,
         handleAlignRight,
@@ -534,7 +528,7 @@ const TableColumnItem = ({
         item,
         label,
         matches,
-}: {
+    }: {
         handleAlignCenter: (item: ItemTableListColumnConfig) => void;
         handleAlignLeft: (item: ItemTableListColumnConfig) => void;
         handleAlignRight: (item: ItemTableListColumnConfig) => void;
@@ -549,7 +543,7 @@ const TableColumnItem = ({
         item: ItemTableListColumnConfig;
         label: string;
         matches: null | readonly Fuse.FuseResultMatch[];
-}) => {
+    }) => {
         const { t } = useTranslation();
         const ref = useRef<HTMLDivElement>(null);
         const dragHandleRef = useRef<HTMLButtonElement>(null);
@@ -586,7 +580,9 @@ const TableColumnItem = ({
                     canDrop: (args) => {
                         const data = args.source.data as unknown as DragData;
                         const isSelf = (args.source.data.id as string[])[0] === item.id;
-                    return dndUtils.isDropTarget(data.type, [DragTarget.TABLE_COLUMN]) && !isSelf;
+                        return (
+                            dndUtils.isDropTarget(data.type, [DragTarget.TABLE_COLUMN]) && !isSelf
+                        );
                     },
                     element: ref.current,
                     getData: ({ element, input }) => {
@@ -762,10 +758,26 @@ const TableColumnItem = ({
                         onChange={(value) => handleRowWidth(item, value)}
                         size="xs"
                         step={10}
+                        stepHoldDelay={300}
+                        stepHoldInterval={100}
                         value={item.width}
                         variant="subtle"
                     />
                 </Group>
             </div>
         );
-};
+    },
+    (prevProps, nextProps) => {
+        // Custom comparison function for better memoization
+        return (
+            prevProps.item.id === nextProps.item.id &&
+            prevProps.item.isEnabled === nextProps.item.isEnabled &&
+            prevProps.item.autoSize === nextProps.item.autoSize &&
+            prevProps.item.width === nextProps.item.width &&
+            prevProps.item.pinned === nextProps.item.pinned &&
+            prevProps.item.align === nextProps.item.align &&
+            prevProps.label === nextProps.label &&
+            prevProps.matches === nextProps.matches
+        );
+    },
+);