feat: optimization of render during dnd

src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx

@@ -11,6 +11,7 @@ import {
     KeyboardSensor,
     Over,
     PointerSensor,
+    TouchSensor,
     useSensor,
     useSensors,
 } from "@dnd-kit/core";
@@ -36,25 +37,36 @@ type Props = {
         statusId: number,
         lexorank?: string
     ) => void;
-    onStatusDragEnd?: (statusId: number, newRank: string) => void;
+    onStatusDragEnd: (statusId: number, lexorank: string) => void;
 };
 
 const StatusColumnsDnd: FC<Props> = props => {
     const { statuses, deals, setDeals, setStatuses } = useStatusesContext();
     const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
     const [activeStatus, setActiveStatus] = useState<StatusSchema | null>(null);
-
     const sortedStatuses = useMemo(() => sortByLexorank(statuses), [statuses]);
+
+    const throttledSetStatuses = useMemo(
+        () => throttle(setStatuses, 200),
+        [setStatuses]
+    );
     const throttledSetDeals = useMemo(
         () => throttle(setDeals, 200),
         [setDeals]
     );
 
+    const sensorOptions = {
+        activationConstraint: {
+            distance: 5,
+        },
+    };
+
     const sensors = useSensors(
-        useSensor(PointerSensor),
+        useSensor(PointerSensor, sensorOptions),
         useSensor(KeyboardSensor, {
             coordinateGetter: sortableKeyboardCoordinates,
-        })
+        }),
+        useSensor(TouchSensor, sensorOptions)
     );
 
     const handleDragStart = ({ active }: DragStartEvent) => {
@@ -131,7 +143,7 @@ const StatusColumnsDnd: FC<Props> = props => {
         const newRank = getNewStatusRank(activeStatusId, overStatusId);
         if (!newRank) return;
 
-        setStatuses(statuses =>
+        throttledSetStatuses(statuses =>
             statuses.map(status =>
                 status.id === activeStatusId
                     ? { ...status, rank: newRank }
@@ -317,10 +329,8 @@ const StatusColumnsDnd: FC<Props> = props => {
                                 id={`${status.id}-status`}>
                                 <StatusColumn
                                     id={`${status.id}-status`}
-                                    title={status.name}
-                                    deals={deals.filter(
-                                        deal => deal.statusId === status.id
-                                    )}
+                                    status={status}
+                                    deals={deals}
                                     isDragging={activeStatus?.id === status.id}
                                 />
                             </SortableItem>
@@ -332,7 +342,7 @@ const StatusColumnsDnd: FC<Props> = props => {
                                 ) : activeStatus ? (
                                     <StatusColumn
                                         id={`${activeStatus.id}-status`}
-                                        title={activeStatus.name}
+                                        status={activeStatus}
                                         deals={deals.filter(
                                             deal =>
                                                 deal.statusId ===