feature/IO-3545-Production-Board-List-DND - Checkpoint

client/src/components/production-list-table/production-list-table.component.jsx

@@ -3,7 +3,7 @@ import { PageHeader } from "@ant-design/pro-layout";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Dropdown, Input, Space, Statistic, Table } from "antd";
 import _ from "lodash";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -84,7 +84,14 @@ function DraggableHeaderCell(props) {
 export function ProductionListTable({ loading, data, refetch, bodyshop, technician, currentUser, isDarkMode }) {
   const [searchText, setSearchText] = useState("");
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  // NEW: smoother resize
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeRafRef = useRef(null);
+  const pendingResizeRef = useRef(null);
+
   const [activeId, setActiveId] = useState(null);
+
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -92,6 +99,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
       }
     })
   );
+
   const {
     treatments: { Production_List_Status_Colors, Enhanced_Payroll }
   } = useTreatmentsWithConfig({
@@ -99,8 +107,10 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
     names: ["Production_List_Status_Colors", "Enhanced_Payroll"],
     splitKey: bodyshop.imexshopid
   });
+
   const assoc = bodyshop.associations.find((a) => a.useremail === currentUser.email);
   const defaultView = assoc?.default_prod_list_view;
+
   const initialStateRef = useRef(
     (bodyshop.production_config &&
       bodyshop.production_config.find((p) => p.name === defaultView)?.columns.tableState) ||
@@ -109,6 +119,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         filteredInfo: { text: "" }
       }
   );
+
   const initialColumnsRef = useRef(
     (initialStateRef.current &&
       bodyshop?.production_config
@@ -129,14 +140,30 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         })) ||
       []
   );
+
   const [state, setState] = useState(initialStateRef.current);
   const [columns, setColumns] = useState(initialColumnsRef.current);
+
   const { t } = useTranslation();
+
   const matchingColumnConfig = useMemo(() => {
     return bodyshop?.production_config?.find((p) => p.name === defaultView);
   }, [bodyshop.production_config, defaultView]);
 
+  // NEW: cleanup RAF on unmount
   useEffect(() => {
+    return () => {
+      if (resizeRafRef.current) cancelAnimationFrame(resizeRafRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    // NEW: while resizing, don’t regenerate columns
+    if (isResizing) return;
+
+    // NEW: bail early BEFORE expensive ProductionListColumns(...) call
+    if (!_.isEqual(initialColumnsRef.current, columns)) return;
+
     const newColumns =
       matchingColumnConfig?.columns.columnKeys.map((k) => {
         return {
@@ -152,10 +179,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
           width: k.width ?? 100
         };
       }) || [];
-    // Only update columns if they haven't been manually changed by the user
+
-    if (_.isEqual(initialColumnsRef.current, columns)) {
+    setColumns(newColumns);
-      setColumns(newColumns);
-    }
   }, [
     matchingColumnConfig,
     bodyshop,
@@ -165,7 +190,8 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
     Production_List_Status_Colors,
     refetch,
     state,
-    columns
+    columns,
+    isResizing
   ]);
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -215,19 +241,54 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
     logImEXEvent("production_list_remove_column", { key });
   };
 
-  const handleResize =
+  // NEW: commit widths via rAF (less jank)
-    (index) =>
+  const applyColumnWidth = useCallback((columnKey, width) => {
-    (e, { size }) => {
+    setColumns((prev) => {
-      const nextColumns = [...columns];
+      const idx = prev.findIndex((c) => c.key === columnKey);
-      nextColumns[index] = {
+      if (idx === -1) return prev;
-        ...nextColumns[index],
+
-        width: size.width
+      const currentWidth = prev[idx].width ?? 100;
-      };
+      if (currentWidth === width) return prev;
-      if (!_.isEqual(nextColumns, columns)) {
+
-        setColumns(nextColumns);
+      const next = prev.slice();
+      next[idx] = { ...next[idx], width };
+      return next;
+    });
+  }, []);
+
+  const handleResize = useCallback(
+    (columnKey) =>
+      (e, { size }) => {
+        pendingResizeRef.current = { columnKey, width: size.width };
+
+        if (resizeRafRef.current) return;
+        resizeRafRef.current = requestAnimationFrame(() => {
+          resizeRafRef.current = null;
+          const pending = pendingResizeRef.current;
+          if (!pending) return;
+          applyColumnWidth(pending.columnKey, pending.width);
+        });
+      },
+    [applyColumnWidth]
+  );
+
+  const handleResizeStart = useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const handleResizeStop = useCallback(
+    (columnKey) =>
+      (e, { size }) => {
+        setIsResizing(false);
+
+        // Ensure final width is committed
+        applyColumnWidth(columnKey, size.width);
+
         setHasUnsavedChanges(true);
-      }
+        logImEXEvent("production_list_resize_column", { key: columnKey, width: size.width });
-    };
+      },
+    [applyColumnWidth]
+  );
 
   const addColumn = (newColumn) => {
     const updatedColumns = [...columns, newColumn];
@@ -384,6 +445,9 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
               onSave={() => {
                 setHasUnsavedChanges(false);
                 initialStateRef.current = state;
+
+                // NEW: after saving, treat current columns as the baseline
+                initialColumnsRef.current = columns;
               }}
             />
             <Input
@@ -410,35 +474,36 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
             tableLayout="fixed"
             pagination={false}
             size="small"
-            {...(Production_List_Status_Colors.treatment === "on" && {
+            {...(Production_List_Status_Colors.treatment === "on" &&
-              onRow: (record, index) => {
+              !isResizing && {
-                if (!bodyshop.md_ro_statuses.production_colors) return null;
+                onRow: (record, index) => {
-                const color = bodyshop.md_ro_statuses.production_colors.find((x) => x.status === record.status);
+                  if (!bodyshop.md_ro_statuses.production_colors) return null;
-                if (!color) {
+                  const color = bodyshop.md_ro_statuses.production_colors.find((x) => x.status === record.status);
-                  if (index % 2 === 0)
+                  if (!color) {
-                    return {
+                    if (index % 2 === 0)
-                      style: {
+                      return {
-                        backgroundColor: "var(--table-row-even-bg)"
+                        style: {
-                      }
+                          backgroundColor: "var(--table-row-even-bg)"
-                    };
+                        }
-                  return null;
+                      };
-                }
+                    return null;
-                return {
-                  className: "rowWithColor",
-                  style: {
-                    "--bgColor": color.color
-                      ? `rgba(${color.color.r},${color.color.g},${color.color.b},${color.color.a || 1})`
-                      : "var(--status-row-bg-fallback)"
                   }
-                };
+                  return {
-              }
+                    className: "rowWithColor",
-            })}
+                    style: {
+                      "--bgColor": color.color
+                        ? `rgba(${color.color.r},${color.color.g},${color.color.b},${color.color.a || 1})`
+                        : "var(--status-row-bg-fallback)"
+                    }
+                  };
+                }
+              })}
             components={{
               header: {
                 cell: DraggableHeaderCell
               }
             }}
-            columns={columns.map((c, index) => {
+            columns={columns.map((c) => {
               return {
                 ...c,
                 filteredValue: state.filteredInfo[c.key] || null,
@@ -449,7 +514,9 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
                 onHeaderCell: (column) => ({
                   columnKey: column.key,
                   width: column.width,
-                  onResize: handleResize(index)
+                  onResize: handleResize(column.key),
+                  onResizeStart: handleResizeStart,
+                  onResizeStop: handleResizeStop(column.key)
                 })
               };
             })}
@@ -460,6 +527,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
             onChange={handleTableChange}
           />
         </SortableContext>
+
         <DragOverlay dropAnimation={null}>
           {activeId ? (
             <div

client/src/components/production-list-table/production-list-table.resizeable.component.jsx

@@ -1,8 +1,9 @@
 import { forwardRef } from "react";
 import { Resizable } from "react-resizable";
+import "react-resizable/css/styles.css";
 
 const ResizableComponent = forwardRef((props, ref) => {
-  const { onResize, width, dragAttributes, dragListeners, ...restProps } = props;
+  const { onResize, onResizeStart, onResizeStop, width, dragAttributes, dragListeners, ...restProps } = props;
 
   if (!width) {
     return <th ref={ref} {...restProps} {...(dragAttributes || {})} {...(dragListeners || {})} />;
@@ -10,11 +11,16 @@ const ResizableComponent = forwardRef((props, ref) => {
 
   return (
     <Resizable
-      width={width || 200}
+      width={width}
       height={0}
       onResize={onResize}
+      onResizeStart={onResizeStart}
+      onResizeStop={onResizeStop}
       draggableOpts={{ enableUserSelectHack: false }}
-      handle={<span className="react-resizable-handle" />}
+      resizeHandles={["e"]}
+      handle={(axis, handleRef) => (
+        <span ref={handleRef} className={`react-resizable-handle react-resizable-handle-${axis}`} />
+      )}
     >
       <th ref={ref} {...restProps} {...(dragAttributes || {})} {...(dragListeners || {})} />
     </Resizable>