feat(task-list): implement optimized task group handling and filter data loading

- Introduced `useFilterDataLoader` hook to manage asynchronous loading of filter data without blocking the main UI.
- Created `TaskGroupWrapperOptimized` for improved rendering of task groups with drag-and-drop functionality.
- Refactored `ProjectViewTaskList` to utilize the new optimized components and enhance loading state management.
- Added `TaskGroup` component for better organization and interaction with task groups.
- Updated `TaskListFilters` to leverage the new filter data loading mechanism, ensuring a smoother user experience.

worklenz-frontend/src/hooks/useTaskDragAndDrop.ts

@@ -0,0 +1,146 @@
+import { useMemo, useCallback } from 'react';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverEvent,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  KeyboardSensor,
+  TouchSensor,
+} from '@dnd-kit/core';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { updateTaskStatus } from '@/features/tasks/tasks.slice';
+import { ITaskListGroup } from '@/types/tasks/taskList.types';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+
+export const useTaskDragAndDrop = () => {
+  const dispatch = useAppDispatch();
+  const { taskGroups, groupBy } = useAppSelector(state => ({
+    taskGroups: state.taskReducer.taskGroups,
+    groupBy: state.taskReducer.groupBy,
+  }));
+
+  // Memoize sensors configuration for better performance
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 250,
+        tolerance: 5,
+      },
+    })
+  );
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    // Add visual feedback for drag start
+    const { active } = event;
+    if (active) {
+      document.body.style.cursor = 'grabbing';
+    }
+  }, []);
+
+  const handleDragOver = useCallback((event: DragOverEvent) => {
+    // Handle drag over logic if needed
+    // This can be used for visual feedback during drag
+  }, []);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      // Reset cursor
+      document.body.style.cursor = '';
+
+      const { active, over } = event;
+      
+      if (!active || !over || !taskGroups) {
+        return;
+      }
+
+      try {
+        const activeId = active.id as string;
+        const overId = over.id as string;
+
+        // Find the task being dragged
+        let draggedTask: IProjectTask | null = null;
+        let sourceGroupId: string | null = null;
+
+        for (const group of taskGroups) {
+          const task = group.tasks?.find((t: IProjectTask) => t.id === activeId);
+          if (task) {
+            draggedTask = task;
+            sourceGroupId = group.id;
+            break;
+          }
+        }
+
+        if (!draggedTask || !sourceGroupId) {
+          console.warn('Could not find dragged task');
+          return;
+        }
+
+        // Determine target group
+        let targetGroupId: string | null = null;
+
+        // Check if dropped on a group container
+        const targetGroup = taskGroups.find((group: ITaskListGroup) => group.id === overId);
+        if (targetGroup) {
+          targetGroupId = targetGroup.id;
+        } else {
+          // Check if dropped on another task
+          for (const group of taskGroups) {
+            const targetTask = group.tasks?.find((t: IProjectTask) => t.id === overId);
+            if (targetTask) {
+              targetGroupId = group.id;
+              break;
+            }
+          }
+        }
+
+        if (!targetGroupId || targetGroupId === sourceGroupId) {
+          return; // No change needed
+        }
+
+        // Update task status based on group change
+        const targetGroupData = taskGroups.find((group: ITaskListGroup) => group.id === targetGroupId);
+        if (targetGroupData && groupBy === 'status') {
+          const updatePayload: any = {
+            task_id: draggedTask.id,
+            status_id: targetGroupData.id,
+          };
+          
+          if (draggedTask.parent_task_id) {
+            updatePayload.parent_task = draggedTask.parent_task_id;
+          }
+          
+          dispatch(updateTaskStatus(updatePayload));
+        }
+      } catch (error) {
+        console.error('Error handling drag end:', error);
+      }
+    },
+    [taskGroups, groupBy, dispatch]
+  );
+
+  // Memoize the drag and drop configuration
+  const dragAndDropConfig = useMemo(
+    () => ({
+      sensors,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+    }),
+    [sensors, handleDragStart, handleDragOver, handleDragEnd]
+  );
+
+  return dragAndDropConfig;
+};