refactor(task-management): optimize task management components with performance enhancements

- Updated import statements for consistency and clarity.
- Refined task sorting and update logic to improve responsiveness.
- Enhanced error logging for better debugging during task sort order changes.
- Increased overscan count in virtualized task lists for smoother scrolling experience.
- Introduced lazy loading for heavy components to reduce initial load times.
- Improved CSS styles for better responsiveness and user interaction across task management components.

worklenz-frontend/src/components/task-management/lazy-assignee-selector.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useCallback, Suspense } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+
+// Lazy load the existing AssigneeSelector component only when needed (Asana-style)
+const LazyAssigneeSelector = React.lazy(() => 
+  import('@/components/AssigneeSelector').then(module => ({ default: module.default }))
+);
+
+interface LazyAssigneeSelectorProps {
+  task: IProjectTask;
+  groupId?: string | null;
+  isDarkMode?: boolean;
+}
+
+// Lightweight loading placeholder
+const LoadingPlaceholder: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => (
+  <div
+    className={`
+      w-5 h-5 rounded-full border border-dashed flex items-center justify-center
+      transition-colors duration-200 animate-pulse
+      ${isDarkMode 
+        ? 'border-gray-600 bg-gray-800 text-gray-400' 
+        : 'border-gray-300 bg-gray-100 text-gray-600'
+      }
+    `}
+  >
+    <PlusOutlined className="text-xs" />
+  </div>
+);
+
+const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({ 
+  task, 
+  groupId = null, 
+  isDarkMode = false 
+}) => {
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
+  const [showComponent, setShowComponent] = useState(false);
+
+  const handleInteraction = useCallback((e: React.MouseEvent) => {
+    // Don't prevent the event from bubbling, just mark as loaded
+    if (!hasLoadedOnce) {
+      setHasLoadedOnce(true);
+      setShowComponent(true);
+    }
+  }, [hasLoadedOnce]);
+
+  // If not loaded yet, show a simple placeholder button
+  if (!hasLoadedOnce) {
+    return (
+      <button
+        onClick={handleInteraction}
+        onMouseEnter={handleInteraction} // Preload on hover for better UX
+        className={`
+          w-5 h-5 rounded-full border border-dashed flex items-center justify-center
+          transition-colors duration-200
+          ${isDarkMode 
+            ? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400' 
+            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
+          }
+        `}
+        title="Add assignee"
+      >
+        <PlusOutlined className="text-xs" />
+      </button>
+    );
+  }
+
+  // Once loaded, show the full component
+  return (
+    <Suspense fallback={<LoadingPlaceholder isDarkMode={isDarkMode} />}>
+      <LazyAssigneeSelector
+        task={task}
+        groupId={groupId}
+        isDarkMode={isDarkMode}
+      />
+    </Suspense>
+  );
+};
+
+export default LazyAssigneeSelectorWrapper;