fix: deals setting during dragOver optimization

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

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { FC, useState } from "react";
+import React, { FC, useMemo, useState } from "react";
 import {
     closestCorners,
     defaultDropAnimation,
@@ -15,6 +15,7 @@ import {
 } from "@dnd-kit/core";
 import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
 import { LexoRank } from "lexorank";
+import { throttle } from "lodash";
 import { Group } from "@mantine/core";
 import DealCard from "@/app/deals/components/DealCard/DealCard";
 import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn";
@@ -33,6 +34,10 @@ type Props = {
 const StatusColumnsDnd: FC<Props> = props => {
     const { statuses, deals, setDeals } = useStatusesContext();
     const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
+    const throttledSetDeals = useMemo(
+        () => throttle(setDeals, 200),
+        [setDeals]
+    );
 
     const sensors = useSensors(
         useSensor(PointerSensor),
@@ -67,7 +72,7 @@ const StatusColumnsDnd: FC<Props> = props => {
         );
         if (!overStatusId) return;
 
-        setDeals(deals =>
+        throttledSetDeals(deals =>
             deals.map(deal =>
                 deal.id === activeDealId
                     ? {