diff --git a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx index 311d8e8..40ac5fd 100644 --- a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx +++ b/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 => { const { statuses, deals, setDeals } = useStatusesContext(); const [activeDeal, setActiveDeal] = useState(null); + const throttledSetDeals = useMemo( + () => throttle(setDeals, 200), + [setDeals] + ); const sensors = useSensors( useSensor(PointerSensor), @@ -67,7 +72,7 @@ const StatusColumnsDnd: FC = props => { ); if (!overStatusId) return; - setDeals(deals => + throttledSetDeals(deals => deals.map(deal => deal.id === activeDealId ? {