From 44527f68cfdcbf9b3c58e19c962575fdce61efbd Mon Sep 17 00:00:00 2001
From: chamikaJ <chamika@ceydigital.com>
Date: Wed, 25 Jun 2025 17:08:40 +0530
Subject: [PATCH 1/6] feat(assignee-selector, suspense-fallback, project-view):
 optimize component loading and enhance user experience

- Integrated synchronous imports for TaskListFilters and filter dropdowns to improve performance and reduce loading times.
- Refactored AssigneeSelector to include a new invite member drawer functionality, enhancing user interaction.
- Simplified SuspenseFallback components for better loading experiences, ensuring they do not block the main UI.
- Updated project view constants to utilize InlineSuspenseFallback for lazy-loaded components, improving rendering efficiency.
---
 .../src/components/AssigneeSelector.tsx       | 13 +++-
 .../suspense-fallback/suspense-fallback.tsx   | 76 +++++++++----------
 .../src/lib/project/project-view-constants.ts | 31 ++++++--
 .../projectView/board/project-view-board.tsx  |  9 +--
 .../taskList/project-view-task-list.tsx       | 70 +++++++++--------
 .../task-list-filters/task-list-filters.tsx   | 65 ++++++++--------
 6 files changed, 144 insertions(+), 120 deletions(-)

diff --git a/worklenz-frontend/src/components/AssigneeSelector.tsx b/worklenz-frontend/src/components/AssigneeSelector.tsx
index a609f523..261588b9 100644
--- a/worklenz-frontend/src/components/AssigneeSelector.tsx
+++ b/worklenz-frontend/src/components/AssigneeSelector.tsx
@@ -10,6 +10,8 @@ import { SocketEvents } from '@/shared/socket-events';
 import { useAuthService } from '@/hooks/useAuth';
 import { Avatar, Button, Checkbox } from '@/components';
 import { sortTeamMembers } from '@/utils/sort-team-members';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
 
 interface AssigneeSelectorProps {
   task: IProjectTask;
@@ -34,6 +36,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const members = useSelector((state: RootState) => state.teamMembersReducer.teamMembers);
   const currentSession = useAuthService().getCurrentSession();
   const { socket } = useSocket();
+  const dispatch = useAppDispatch();
 
   const filteredMembers = useMemo(() => {
     return teamMembers?.data?.filter(member =>
@@ -149,6 +152,11 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
     return assignees?.includes(memberId) || false;
   };
 
+  const handleInviteProjectMemberDrawer = () => {
+    setIsOpen(false); // Close the assignee dropdown first
+    dispatch(toggleProjectMemberDrawer()); // Then open the invite drawer
+  };
+
   return (
     <>
       <button
@@ -271,10 +279,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                   : 'text-blue-600 hover:bg-blue-50'
                 }
               `}
-              onClick={() => {
-                // TODO: Implement invite member functionality
-                console.log('Invite member clicked');
-              }}
+              onClick={handleInviteProjectMemberDrawer}
             >
               <UserAddOutlined />
               Invite member
diff --git a/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx b/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
index 0354849b..d533a4a2 100644
--- a/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
+++ b/worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx
@@ -1,50 +1,42 @@
 import React, { memo } from 'react';
-import { colors } from '@/styles/colors';
-import { getInitialTheme } from '@/utils/get-initial-theme';
-import { ConfigProvider, theme, Layout, Spin } from 'antd';
+import { Spin } from 'antd';
 
-// Memoized loading component with theme awareness
+// Lightweight loading component - removed heavy theme calculations
 export const SuspenseFallback = memo(() => {
-  const currentTheme = getInitialTheme();
-  const isDark = currentTheme === 'dark';
-
-  // Memoize theme configuration to prevent unnecessary re-renders
-  const themeConfig = React.useMemo(() => ({
-    algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
-    components: {
-      Layout: {
-        colorBgLayout: isDark ? colors.darkGray : '#fafafa',
-      },
-      Spin: {
-        colorPrimary: isDark ? '#fff' : '#1890ff',
-      },
-    },
-  }), [isDark]);
-
-  // Memoize layout style to prevent object recreation
-  const layoutStyle = React.useMemo(() => ({
-    position: 'fixed' as const,
-    width: '100vw',
-    height: '100vh',
-    background: 'transparent',
-    transition: 'none',
-  }), []);
-
-  // Memoize spin style to prevent object recreation
-  const spinStyle = React.useMemo(() => ({
-    position: 'absolute' as const,
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-  }), []);
-
   return (
-    <ConfigProvider theme={themeConfig}>
-      <Layout className="app-loading-container" style={layoutStyle}>
-        <Spin size="large" style={spinStyle} />
-      </Layout>
-    </ConfigProvider>
+    <div 
+      style={{
+        position: 'fixed',
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'transparent',
+        zIndex: 9999,
+      }}
+    >
+      <Spin size="large" />
+    </div>
+  );
+});
+
+// Lightweight fallback for internal components that doesn't cover the screen
+export const InlineSuspenseFallback = memo(() => {
+  return (
+    <div 
+      style={{
+        padding: '40px 20px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '200px',
+      }}
+    >
+      <Spin size="large" />
+    </div>
   );
 });
 
 SuspenseFallback.displayName = 'SuspenseFallback';
+InlineSuspenseFallback.displayName = 'InlineSuspenseFallback';
diff --git a/worklenz-frontend/src/lib/project/project-view-constants.ts b/worklenz-frontend/src/lib/project/project-view-constants.ts
index 4b90676f..650abfb5 100644
--- a/worklenz-frontend/src/lib/project/project-view-constants.ts
+++ b/worklenz-frontend/src/lib/project/project-view-constants.ts
@@ -1,12 +1,15 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, Suspense } from 'react';
+import { InlineSuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
 
-// Lazy load all project view components to reduce initial bundle size
+// Import core components synchronously to avoid suspense in main tabs
+import ProjectViewEnhancedTasks from '@/pages/projects/projectView/enhancedTasks/project-view-enhanced-tasks';
+import ProjectViewEnhancedBoard from '@/pages/projects/projectView/enhancedBoard/project-view-enhanced-board';
+
+// Lazy load less critical components
 const ProjectViewInsights = React.lazy(() => import('@/pages/projects/projectView/insights/project-view-insights'));
 const ProjectViewFiles = React.lazy(() => import('@/pages/projects/projectView/files/project-view-files'));
 const ProjectViewMembers = React.lazy(() => import('@/pages/projects/projectView/members/project-view-members'));
 const ProjectViewUpdates = React.lazy(() => import('@/pages/projects/project-view-1/updates/project-view-updates'));
-const ProjectViewEnhancedTasks = React.lazy(() => import('@/pages/projects/projectView/enhancedTasks/project-view-enhanced-tasks'));
-const ProjectViewEnhancedBoard = React.lazy(() => import('@/pages/projects/projectView/enhancedBoard/project-view-enhanced-board'));
 
 // type of a tab items
 type TabItems = {
@@ -37,24 +40,36 @@ export const tabItems: TabItems[] = [
     index: 2,
     key: 'project-insights-member-overview',
     label: 'Insights',
-    element: React.createElement(ProjectViewInsights),
+    element: React.createElement(Suspense, 
+      { fallback: React.createElement(InlineSuspenseFallback) },
+      React.createElement(ProjectViewInsights)
+    ),
   },
   {
     index: 3,
     key: 'all-attachments',
     label: 'Files',
-    element: React.createElement(ProjectViewFiles),
+    element: React.createElement(Suspense, 
+      { fallback: React.createElement(InlineSuspenseFallback) },
+      React.createElement(ProjectViewFiles)
+    ),
   },
   {
     index: 4,
     key: 'members',
     label: 'Members',
-    element: React.createElement(ProjectViewMembers),
+    element: React.createElement(Suspense, 
+      { fallback: React.createElement(InlineSuspenseFallback) },
+      React.createElement(ProjectViewMembers)
+    ),
   },
   {
     index: 5,
     key: 'updates',
     label: 'Updates',
-    element: React.createElement(ProjectViewUpdates),
+    element: React.createElement(Suspense, 
+      { fallback: React.createElement(InlineSuspenseFallback) },
+      React.createElement(ProjectViewUpdates)
+    ),
   },
 ];
diff --git a/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx b/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx
index 70c1844e..8f71de36 100644
--- a/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState, useRef, useMemo, useCallback, lazy, Suspense } from 'react';
+import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
 
-const TaskListFilters = lazy(() => import('../taskList/task-list-filters/task-list-filters'));
+import TaskListFilters from '../taskList/task-list-filters/task-list-filters';
 import { Flex, Skeleton } from 'antd';
 import BoardSectionCardContainer from './board-section/board-section-container';
 import {
@@ -44,6 +44,7 @@ import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status'
 import { debounce } from 'lodash';
 import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types';
 import { updateTaskPriority as updateBoardTaskPriority } from '@/features/board/board-slice';
+
 interface DroppableContainer {
   id: UniqueIdentifier;
   data: {
@@ -554,9 +555,7 @@ const ProjectViewBoard = () => {
 
   return (
     <Flex vertical gap={16}>
-      <Suspense fallback={<div>Loading filters...</div>}>
-        <TaskListFilters position={'board'} />
-      </Suspense>
+      <TaskListFilters position={'board'} />
       <Skeleton active loading={isLoading} className='mt-4 p-4'>
         <DndContext
           sensors={sensors}
diff --git a/worklenz-frontend/src/pages/projects/projectView/taskList/project-view-task-list.tsx b/worklenz-frontend/src/pages/projects/projectView/taskList/project-view-task-list.tsx
index 753aeb98..3cfe8486 100644
--- a/worklenz-frontend/src/pages/projects/projectView/taskList/project-view-task-list.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/taskList/project-view-task-list.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState, useMemo, lazy, Suspense } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { Empty } from '@/shared/antd-imports';
 import Flex from 'antd/es/flex';
 import Skeleton from 'antd/es/skeleton';
 import { useSearchParams } from 'react-router-dom';
 
-const TaskListFilters = lazy(() => import('./task-list-filters/task-list-filters'));
+import TaskListFilters from './task-list-filters/task-list-filters';
 import TaskGroupWrapperOptimized from './task-group-wrapper-optimized';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -17,7 +17,7 @@ const ProjectViewTaskList = () => {
   const dispatch = useAppDispatch();
   const { projectView } = useTabSearchParam();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [initialLoadComplete, setInitialLoadComplete] = useState(false);
+  const [coreDataLoaded, setCoreDataLoaded] = useState(false);
 
   // Split selectors to prevent unnecessary rerenders
   const projectId = useAppSelector(state => state.projectReducer.projectId);
@@ -33,11 +33,11 @@ const ProjectViewTaskList = () => {
 
   const loadingPhases = useAppSelector(state => state.phaseReducer.loadingPhases);
 
-  // Single source of truth for loading state - EXCLUDE labels loading from skeleton
-  // Labels loading should not block the main task list display
+  // Simplified loading state - only wait for essential data
+  // Remove dependency on phases and status categories for initial render
   const isLoading = useMemo(() => 
-    loadingGroups || loadingPhases || loadingStatusCategories || !initialLoadComplete,
-    [loadingGroups, loadingPhases, loadingStatusCategories, initialLoadComplete]
+    loadingGroups || !coreDataLoaded,
+    [loadingGroups, coreDataLoaded]
   );
 
   // Memoize the empty state check
@@ -56,53 +56,63 @@ const ProjectViewTaskList = () => {
     }
   }, [projectView, setSearchParams, searchParams]);
 
-  // Batch initial data fetching - core data only
+  // Optimized parallel data fetching - don't wait for everything
   useEffect(() => {
-    const fetchInitialData = async () => {
-      if (!projectId || !groupBy || initialLoadComplete) return;
+    const fetchCoreData = async () => {
+      if (!projectId || !groupBy || coreDataLoaded) return;
 
       try {
-        // Batch only essential API calls for initial load
-        // Filter data (labels, assignees, etc.) will load separately and not block the UI
-        await Promise.allSettled([
+        // Start all requests in parallel, but only wait for task columns
+        // Other data can load in background without blocking UI
+        const corePromises = [
           dispatch(fetchTaskListColumns(projectId)),
-          dispatch(fetchPhasesByProjectId(projectId)),
-          dispatch(fetchStatusesCategories()),
-        ]);
-        setInitialLoadComplete(true);
+          dispatch(fetchTaskGroups(projectId)), // Start immediately
+        ];
+
+        // Background data - don't wait for these
+        dispatch(fetchPhasesByProjectId(projectId));
+        dispatch(fetchStatusesCategories());
+
+        // Only wait for essential data
+        await Promise.allSettled(corePromises);
+        setCoreDataLoaded(true);
       } catch (error) {
-        console.error('Error fetching initial data:', error);
-        setInitialLoadComplete(true); // Still mark as complete to prevent infinite loading
+        console.error('Error fetching core data:', error);
+        setCoreDataLoaded(true); // Still mark as complete to prevent infinite loading
       }
     };
 
-    fetchInitialData();
-  }, [projectId, groupBy, dispatch, initialLoadComplete]);
+    fetchCoreData();
+  }, [projectId, groupBy, dispatch, coreDataLoaded]);
 
-  // Fetch task groups with dependency on initial load completion
+  // Optimized task groups fetching - remove initialLoadComplete dependency
   useEffect(() => {
     const fetchTasks = async () => {
-      if (!projectId || !groupBy || projectView !== 'list' || !initialLoadComplete) return;
+      if (!projectId || !groupBy || projectView !== 'list') return;
 
       try {
-        await dispatch(fetchTaskGroups(projectId));
+        // Only refetch if filters change, not on initial load
+        if (coreDataLoaded) {
+          await dispatch(fetchTaskGroups(projectId));
+        }
       } catch (error) {
         console.error('Error fetching task groups:', error);
       }
     };
 
-    fetchTasks();
-  }, [projectId, groupBy, projectView, dispatch, fields, search, archived, initialLoadComplete]);
+    // Only refetch when filters change
+    if (coreDataLoaded) {
+      fetchTasks();
+    }
+  }, [projectId, groupBy, projectView, dispatch, fields, search, archived, coreDataLoaded]);
 
   // Memoize the task groups to prevent unnecessary re-renders
   const memoizedTaskGroups = useMemo(() => taskGroups || [], [taskGroups]);
 
   return (
     <Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
-      {/* Filters load independently and don't block the main content */}
-      <Suspense fallback={<div>Loading filters...</div>}>
-        <TaskListFilters position="list" />
-      </Suspense>
+      {/* Filters load synchronously - no suspense boundary */}
+      <TaskListFilters position="list" />
 
       {isEmptyState ? (
         <Empty description="No tasks group found" />
diff --git a/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-filters/task-list-filters.tsx b/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-filters/task-list-filters.tsx
index fcf866f1..91c56551 100644
--- a/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-filters/task-list-filters.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/taskList/task-list-filters/task-list-filters.tsx
@@ -16,13 +16,14 @@ import {
 import { getTeamMembers } from '@/features/team-members/team-members.slice';
 import useTabSearchParam from '@/hooks/useTabSearchParam';
 
-const SearchDropdown = React.lazy(() => import('@components/project-task-filters/filter-dropdowns/search-dropdown'));
-const SortFilterDropdown = React.lazy(() => import('@components/project-task-filters/filter-dropdowns/sort-filter-dropdown'));
-const LabelsFilterDropdown = React.lazy(() => import('@components/project-task-filters/filter-dropdowns/labels-filter-dropdown'));
-const MembersFilterDropdown = React.lazy(() => import('@components/project-task-filters/filter-dropdowns/members-filter-dropdown'));
-const GroupByFilterDropdown = React.lazy(() => import('@components/project-task-filters/filter-dropdowns/group-by-filter-dropdown'));
-const ShowFieldsFilterDropdown = React.lazy(() => import('@components/project-task-filters/filter-dropdowns/show-fields-filter-dropdown'));
-const PriorityFilterDropdown = React.lazy(() => import('@components/project-task-filters/filter-dropdowns/priority-filter-dropdown'));
+// Import filter components synchronously for better performance
+import SearchDropdown from '@components/project-task-filters/filter-dropdowns/search-dropdown';
+import SortFilterDropdown from '@components/project-task-filters/filter-dropdowns/sort-filter-dropdown';
+import LabelsFilterDropdown from '@components/project-task-filters/filter-dropdowns/labels-filter-dropdown';
+import MembersFilterDropdown from '@components/project-task-filters/filter-dropdowns/members-filter-dropdown';
+import GroupByFilterDropdown from '@components/project-task-filters/filter-dropdowns/group-by-filter-dropdown';
+import ShowFieldsFilterDropdown from '@components/project-task-filters/filter-dropdowns/show-fields-filter-dropdown';
+import PriorityFilterDropdown from '@components/project-task-filters/filter-dropdowns/priority-filter-dropdown';
 
 interface TaskListFiltersProps {
   position: 'board' | 'list';
@@ -39,44 +40,46 @@ const TaskListFilters: React.FC<TaskListFiltersProps> = ({ position }) => {
 
   const handleShowArchivedChange = () => dispatch(toggleArchived());
 
-  // Load filter data asynchronously and non-blocking
-  // This runs independently of the main task list loading
+  // Optimized filter data loading - staggered and non-blocking
   useEffect(() => {
-    const loadFilterData = async () => {
+    const loadFilterData = () => {
       try {
-        // Load priorities first (usually cached/fast)
+        // Load priorities first (usually cached/fast) - immediate
         if (!priorities.length) {
           dispatch(fetchPriorities());
         }
 
-        // Load project-specific filter data in parallel, but don't await
-        // This allows the main task list to load while filters are still loading
         if (projectId) {
-          // Fire and forget - these will update the UI when ready
-          dispatch(fetchLabelsByProject(projectId));
-          dispatch(fetchTaskAssignees(projectId));
-        }
+          // Stagger the loading to prevent overwhelming the server
+          // Load project-specific data with delays
+          setTimeout(() => {
+            dispatch(fetchLabelsByProject(projectId));
+          }, 100);
 
-        // Load team members (usually needed for member filters)
-        dispatch(getTeamMembers({ 
-          index: 0, 
-          size: 100, 
-          field: null, 
-          order: null, 
-          search: null, 
-          all: true 
-        }));
+          setTimeout(() => {
+            dispatch(fetchTaskAssignees(projectId));
+          }, 200);
+
+          // Load team members last (heaviest query)
+          setTimeout(() => {
+            dispatch(getTeamMembers({ 
+              index: 0, 
+              size: 50, // Reduce initial load size
+              field: null, 
+              order: null, 
+              search: null, 
+              all: false // Don't load all at once
+            }));
+          }, 300);
+        }
       } catch (error) {
         console.error('Error loading filter data:', error);
         // Don't throw - filter loading errors shouldn't break the main UI
       }
     };
 
-    // Use setTimeout to ensure this runs after the main component render
-    // This prevents filter loading from blocking the initial render
-    const timeoutId = setTimeout(loadFilterData, 0);
-    
-    return () => clearTimeout(timeoutId);
+    // Load immediately without setTimeout to avoid additional delay
+    loadFilterData();
   }, [dispatch, priorities.length, projectId]);
 
   return (

From f22caea1e5490ebde597c76f75cbd67f9778869b Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Wed, 25 Jun 2025 23:33:32 +0530
Subject: [PATCH 2/6] refactor(task-filters, project-view-header): streamline
 imports and optimize task fetching

- Removed unused imports and optimized the import structure in ImprovedTaskFilters for better readability and performance.
- Updated ProjectViewHeader to include a call to fetchTasksV3, ensuring enhanced task data is refreshed appropriately.
- Adjusted task creation request type to Partial for improved type safety.
---
 .../task-management/improved-task-filters.tsx | 34 ++-----------------
 .../projectView/project-view-header.tsx       |  5 ++-
 2 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
index 9fefc16f..50c063f5 100644
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -14,37 +14,18 @@ import {
   EyeOutlined,
   InboxOutlined,
   CheckOutlined,
-  SettingOutlined,
-  MoreOutlined,
 } from './antd-imports';
 import { RootState } from '@/app/store';
-import { AppDispatch } from '@/app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import useTabSearchParam from '@/hooks/useTabSearchParam';
-import { useSocket } from '@/socket/socketContext';
-import { SocketEvents } from '@/shared/socket-events';
-import { colors } from '@/styles/colors';
-import SingleAvatar from '@components/common/single-avatar/single-avatar';
 import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
-import { 
-  Dropdown, 
-  Checkbox, 
-  Button, 
-  Space,
-  taskManagementAntdConfig 
-} from './antd-imports';
-import { toggleField, TaskListField } from '@/features/task-management/taskListFields.slice';
+import { toggleField } from '@/features/task-management/taskListFields.slice';
 
 // Import Redux actions
 import { fetchTasksV3, setSelectedPriorities } from '@/features/task-management/task-management.slice';
 import { setCurrentGrouping, selectCurrentGrouping } from '@/features/task-management/grouping.slice';
-import { fetchPriorities } from '@/features/taskAttributes/taskPrioritySlice';
-import { fetchLabelsByProject, fetchTaskAssignees, setMembers, setLabels } from '@/features/tasks/tasks.slice';
-import { getTeamMembers } from '@/features/team-members/team-members.slice';
-import { ITaskPriority } from '@/types/tasks/taskPriority.types';
-import { ITaskListColumn } from '@/types/tasks/taskList.types';
-import { IGroupBy } from '@/features/tasks/tasks.slice';
+import { setMembers, setLabels } from '@/features/tasks/tasks.slice';
 
 // Optimized selectors with proper transformation logic
 const selectFilterData = createSelector(
@@ -610,13 +591,10 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
 }) => {
   const { t } = useTranslation('task-list-filters');
   const dispatch = useAppDispatch();
-  const { socket, connected } = useSocket();
   
   // Get current state values for filter updates
   const currentTaskAssignees = useAppSelector(state => state.taskReducer.taskAssignees);
-  const currentBoardAssignees = useAppSelector(state => state.boardReducer.taskAssignees);
   const currentTaskLabels = useAppSelector(state => state.taskReducer.labels);
-  const currentBoardLabels = useAppSelector(state => state.boardReducer.labels);
 
   // Use the filter data loader hook
   useFilterDataLoader();
@@ -649,7 +627,6 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
   const isDarkMode = useAppSelector(state => state.themeReducer?.mode === 'dark');
   const { projectId } = useAppSelector(state => state.projectReducer);
   const { projectView } = useTabSearchParam();
-  const { columns } = useAppSelector(state => state.taskReducer);
 
   // Theme-aware class names - memoize to prevent unnecessary re-renders
   const themeClasses = useMemo(() => ({
@@ -761,12 +738,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     console.log('Toggle archived:', !showArchived);
   }, [showArchived]);
 
-  // Show fields dropdown functionality
-  const handleColumnVisibilityChange = useCallback(async (col: ITaskListColumn) => {
-    if (!projectId) return;
-    console.log('Column visibility change:', col);
-    // TODO: Implement column visibility change
-  }, [projectId]);
+
 
   return (
     <div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
diff --git a/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx b/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
index bb6c35b6..1d639d9d 100644
--- a/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
+++ b/worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
@@ -54,6 +54,7 @@ import useTabSearchParam from '@/hooks/useTabSearchParam';
 import { addTaskCardToTheTop, fetchBoardTaskGroups } from '@/features/board/board-slice';
 import { fetchPhasesByProjectId } from '@/features/projects/singleProject/phase/phases.slice';
 import { fetchEnhancedKanbanGroups } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import { fetchTasksV3 } from '@/features/task-management/task-management.slice';
 
 const ProjectViewHeader = () => {
   const navigate = useNavigate();
@@ -83,6 +84,8 @@ const ProjectViewHeader = () => {
         dispatch(fetchTaskListColumns(projectId));
         dispatch(fetchPhasesByProjectId(projectId))
         dispatch(fetchTaskGroups(projectId));
+        // Also refresh the enhanced tasks data
+        dispatch(fetchTasksV3(projectId));
         break;
       case 'board':
         // dispatch(fetchBoardTaskGroups(projectId));
@@ -166,7 +169,7 @@ const ProjectViewHeader = () => {
     try {
       setCreatingTask(true);
 
-      const body: ITaskCreateRequest = {
+      const body: Partial<ITaskCreateRequest> = {
         name: DEFAULT_TASK_NAME,
         project_id: selectedProject?.id,
         reporter_id: currentSession?.id,

From e096bc66abf2be1577475301d7a639435ae77dae Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Wed, 25 Jun 2025 23:40:41 +0530
Subject: [PATCH 3/6] feat(task-filters): implement search functionality for
 task filtering

- Added search state management to ImprovedTaskFilters, allowing users to filter tasks based on search input.
- Integrated search actions for both list and board views, ensuring appropriate task fetching based on the current view.
- Updated task management slice to include a search field, enhancing the overall task filtering capabilities.
---
 .../task-management/improved-task-filters.tsx | 43 ++++++++++++++-----
 .../task-management/task-management.slice.ts  | 13 +++++-
 .../src/types/task-management.types.ts        |  1 +
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
index 50c063f5..5eb29310 100644
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -23,9 +23,10 @@ import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
 import { toggleField } from '@/features/task-management/taskListFields.slice';
 
 // Import Redux actions
-import { fetchTasksV3, setSelectedPriorities } from '@/features/task-management/task-management.slice';
+import { fetchTasksV3, setSelectedPriorities, setSearch as setTaskManagementSearch } from '@/features/task-management/task-management.slice';
 import { setCurrentGrouping, selectCurrentGrouping } from '@/features/task-management/grouping.slice';
-import { setMembers, setLabels } from '@/features/tasks/tasks.slice';
+import { setMembers, setLabels, setSearch } from '@/features/tasks/tasks.slice';
+import { setBoardSearch } from '@/features/board/board-slice';
 
 // Optimized selectors with proper transformation logic
 const selectFilterData = createSelector(
@@ -719,18 +720,42 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
   const handleSearchChange = useCallback((value: string) => {
     setSearchValue(value);
     
-    // Log the search change for now
+    if (!projectId) return;
+    
+    // Dispatch search action based on current view
+    if (projectView === 'list') {
+      // For list view, use the tasks slice
+      dispatch(setSearch(value));
+    } else {
+      // For board view, use the board slice
+      dispatch(setBoardSearch(value));
+    }
+    
     console.log('Search change:', value, { projectView, projectId });
     
-    // TODO: Implement proper search dispatch
-  }, [projectView, projectId]);
+    // Trigger task refetch with new search value
+    dispatch(fetchTasksV3(projectId));
+  }, [projectView, projectId, dispatch]);
 
   const clearAllFilters = useCallback(() => {
-    // TODO: Implement clear all filters
-    console.log('Clear all filters');
+    if (!projectId) return;
+    
+    // Clear search
     setSearchValue('');
+    if (projectView === 'list') {
+      dispatch(setSearch(''));
+    } else {
+      dispatch(setBoardSearch(''));
+    }
+    
+    // Clear other filters
     setShowArchived(false);
-  }, []);
+    
+    // Trigger task refetch with cleared filters
+    dispatch(fetchTasksV3(projectId));
+    
+    console.log('Clear all filters');
+  }, [projectId, projectView, dispatch]);
 
   const toggleArchived = useCallback(() => {
     setShowArchived(!showArchived);
@@ -738,8 +763,6 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     console.log('Toggle archived:', !showArchived);
   }, [showArchived]);
 
-
-
   return (
     <div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
       <div className="flex flex-wrap items-center gap-2">
diff --git a/worklenz-frontend/src/features/task-management/task-management.slice.ts b/worklenz-frontend/src/features/task-management/task-management.slice.ts
index f015d0b0..706c75d5 100644
--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -17,6 +17,7 @@ const initialState: TaskManagementState = {
   groups: [],
   grouping: null,
   selectedPriorities: [],
+  search: '',
 };
 
 // Async thunk to fetch tasks from API
@@ -153,7 +154,11 @@ export const fetchTasksV3 = createAsyncThunk(
         ? state.taskManagement.selectedPriorities.join(',')
         : '';
       
+      // Get search value from taskReducer
+      const searchValue = state.taskReducer.search || '';
+      
       console.log('fetchTasksV3 - selectedPriorities:', selectedPriorities);
+      console.log('fetchTasksV3 - searchValue:', searchValue);
       
       const config: ITaskListConfigV2 = {
         id: projectId,
@@ -161,7 +166,7 @@ export const fetchTasksV3 = createAsyncThunk(
         group: currentGrouping,
         field: '',
         order: '',
-        search: '',
+        search: searchValue,
         statuses: '',
         members: selectedAssignees,
         projects: '',
@@ -328,6 +333,11 @@ const taskManagementSlice = createSlice({
     setSelectedPriorities: (state, action: PayloadAction<string[]>) => {
       state.selectedPriorities = action.payload;
     },
+
+    // Search action
+    setSearch: (state, action: PayloadAction<string>) => {
+      state.search = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -387,6 +397,7 @@ export const {
   setLoading,
   setError,
   setSelectedPriorities,
+  setSearch,
 } = taskManagementSlice.actions;
 
 export default taskManagementSlice.reducer;
diff --git a/worklenz-frontend/src/types/task-management.types.ts b/worklenz-frontend/src/types/task-management.types.ts
index 246ad0b6..0d1a9d06 100644
--- a/worklenz-frontend/src/types/task-management.types.ts
+++ b/worklenz-frontend/src/types/task-management.types.ts
@@ -76,6 +76,7 @@ export interface TaskManagementState {
   groups: TaskGroup[]; // Pre-processed groups from V3 API
   grouping: string | null; // Current grouping from V3 API
   selectedPriorities: string[]; // Selected priority filters
+  search: string; // Search query for filtering tasks
 }
 
 export interface TaskGroupsState {

From 19cd0e577cadaff767ec9c3e66fc5609c7ad80da Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Wed, 25 Jun 2025 23:46:38 +0530
Subject: [PATCH 4/6] feat(task-filters): implement comprehensive filter
 clearing functionality

- Added logic to clear label, assignee, and priority filters in ImprovedTaskFilters, enhancing user experience by allowing users to reset all filters at once.
- Updated the dependency array in the useEffect hook to include currentTaskLabels and currentTaskAssignees, ensuring proper updates on filter changes.
- Modified task management slice to change the delimiter for selected labels, assignees, and priorities from commas to spaces for improved readability.
---
 .../task-management/improved-task-filters.tsx | 19 ++++++++++++++++++-
 .../task-management/task-management.slice.ts  |  6 +++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
index 5eb29310..d1e33087 100644
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -748,6 +748,23 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
       dispatch(setBoardSearch(''));
     }
     
+    // Clear label filters
+    const clearedLabels = currentTaskLabels.map(label => ({
+      ...label,
+      selected: false
+    }));
+    dispatch(setLabels(clearedLabels));
+    
+    // Clear assignee filters
+    const clearedAssignees = currentTaskAssignees.map(member => ({
+      ...member,
+      selected: false
+    }));
+    dispatch(setMembers(clearedAssignees));
+    
+    // Clear priority filters
+    dispatch(setSelectedPriorities([]));
+    
     // Clear other filters
     setShowArchived(false);
     
@@ -755,7 +772,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     dispatch(fetchTasksV3(projectId));
     
     console.log('Clear all filters');
-  }, [projectId, projectView, dispatch]);
+  }, [projectId, projectView, dispatch, currentTaskLabels, currentTaskAssignees]);
 
   const toggleArchived = useCallback(() => {
     setShowArchived(!showArchived);
diff --git a/worklenz-frontend/src/features/task-management/task-management.slice.ts b/worklenz-frontend/src/features/task-management/task-management.slice.ts
index 706c75d5..5f9d177e 100644
--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -141,17 +141,17 @@ export const fetchTasksV3 = createAsyncThunk(
       
       // Get selected labels from taskReducer
       const selectedLabels = state.taskReducer.labels
-        ? state.taskReducer.labels.filter(l => l.selected).map(l => l.id).join(',')
+        ? state.taskReducer.labels.filter(l => l.selected).map(l => l.id).join(' ')
         : '';
       
       // Get selected assignees from taskReducer
       const selectedAssignees = state.taskReducer.taskAssignees
-        ? state.taskReducer.taskAssignees.filter(m => m.selected).map(m => m.id).join(',')
+        ? state.taskReducer.taskAssignees.filter(m => m.selected).map(m => m.id).join(' ')
         : '';
       
       // Get selected priorities from taskManagement slice
       const selectedPriorities = state.taskManagement.selectedPriorities
-        ? state.taskManagement.selectedPriorities.join(',')
+        ? state.taskManagement.selectedPriorities.join(' ')
         : '';
       
       // Get search value from taskReducer

From 4c34a017295b7fe6fda16576abb476f79db668c9 Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Wed, 25 Jun 2025 23:51:59 +0530
Subject: [PATCH 5/6] refactor(task-filters): update priority handling in task
 filters

- Replaced the use of selectedPriorities from taskManagement slice with priorities from taskReducer for consistency across the application.
- Updated dispatch calls in ImprovedTaskFilters to utilize the new setPriorities action, enhancing clarity and maintainability.
- Removed unnecessary imports and streamlined the selector logic for improved performance and readability.
---
 .../task-management/improved-task-filters.tsx      | 14 ++++++--------
 .../task-management/task-management.slice.ts       |  6 +++---
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
index d1e33087..716de798 100644
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -23,9 +23,9 @@ import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
 import { toggleField } from '@/features/task-management/taskListFields.slice';
 
 // Import Redux actions
-import { fetchTasksV3, setSelectedPriorities, setSearch as setTaskManagementSearch } from '@/features/task-management/task-management.slice';
+import { fetchTasksV3, setSearch as setTaskManagementSearch } from '@/features/task-management/task-management.slice';
 import { setCurrentGrouping, selectCurrentGrouping } from '@/features/task-management/grouping.slice';
-import { setMembers, setLabels, setSearch } from '@/features/tasks/tasks.slice';
+import { setMembers, setLabels, setSearch, setPriorities } from '@/features/tasks/tasks.slice';
 import { setBoardSearch } from '@/features/board/board-slice';
 
 // Optimized selectors with proper transformation logic
@@ -39,7 +39,6 @@ const selectFilterData = createSelector(
     (state: any) => state.taskReducer.taskAssignees,
     (state: any) => state.boardReducer.taskAssignees,
     (state: any) => state.projectReducer.project,
-    (state: any) => state.taskManagement.selectedPriorities,
   ],
   (
     priorities,
@@ -49,8 +48,7 @@ const selectFilterData = createSelector(
     boardLabels,
     taskAssignees,
     boardAssignees,
-    project,
-    selectedPriorities
+    project
   ) => ({
     priorities: priorities || [],
     taskPriorities: taskPriorities || [],
@@ -60,7 +58,7 @@ const selectFilterData = createSelector(
     taskAssignees: taskAssignees || [],
     boardAssignees: boardAssignees || [],
     project,
-    selectedPriorities: selectedPriorities || [],
+    selectedPriorities: taskPriorities || [], // Use taskReducer.priorities as selected priorities
   })
 );
 
@@ -687,7 +685,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     // Handle priorities
     if (sectionId === 'priority') {
       console.log('Priority selection changed:', { sectionId, values, projectId });
-      dispatch(setSelectedPriorities(values));
+      dispatch(setPriorities(values));
       dispatch(fetchTasksV3(projectId));
       return;
     }
@@ -763,7 +761,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     dispatch(setMembers(clearedAssignees));
     
     // Clear priority filters
-    dispatch(setSelectedPriorities([]));
+    dispatch(setPriorities([]));
     
     // Clear other filters
     setShowArchived(false);
diff --git a/worklenz-frontend/src/features/task-management/task-management.slice.ts b/worklenz-frontend/src/features/task-management/task-management.slice.ts
index 5f9d177e..493b6473 100644
--- a/worklenz-frontend/src/features/task-management/task-management.slice.ts
+++ b/worklenz-frontend/src/features/task-management/task-management.slice.ts
@@ -149,9 +149,9 @@ export const fetchTasksV3 = createAsyncThunk(
         ? state.taskReducer.taskAssignees.filter(m => m.selected).map(m => m.id).join(' ')
         : '';
       
-      // Get selected priorities from taskManagement slice
-      const selectedPriorities = state.taskManagement.selectedPriorities
-        ? state.taskManagement.selectedPriorities.join(' ')
+      // Get selected priorities from taskReducer (consistent with other slices)
+      const selectedPriorities = state.taskReducer.priorities
+        ? state.taskReducer.priorities.join(' ')
         : '';
       
       // Get search value from taskReducer

From 8c02ad9291b3a52fd87f67b611a275eef76f3bb8 Mon Sep 17 00:00:00 2001
From: chamiakJ <chamika@ceydigital.com>
Date: Thu, 26 Jun 2025 00:07:19 +0530
Subject: [PATCH 6/6] feat(task-filters): enhance performance and debounce
 functionality in task filters

- Introduced performance constants to limit filter options and improve UI responsiveness.
- Implemented an enhanced debounced function with cancellation support for filter and search changes, reducing unnecessary API calls.
- Optimized filter data retrieval and state updates using memoization to prevent redundant calculations.
- Improved the clear all filters functionality to batch state updates and prevent multiple re-renders, enhancing user experience.
- Updated the handling of search input to immediately clear and dispatch actions, ensuring efficient task fetching.
---
 .../task-management/improved-task-filters.tsx | 305 ++++++++++++------
 1 file changed, 211 insertions(+), 94 deletions(-)

diff --git a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
index 716de798..54a6025d 100644
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -28,6 +28,11 @@ import { setCurrentGrouping, selectCurrentGrouping } from '@/features/task-manag
 import { setMembers, setLabels, setSearch, setPriorities } from '@/features/tasks/tasks.slice';
 import { setBoardSearch } from '@/features/board/board-slice';
 
+// Performance constants
+const FILTER_DEBOUNCE_DELAY = 300; // ms
+const SEARCH_DEBOUNCE_DELAY = 500; // ms
+const MAX_FILTER_OPTIONS = 100; // Limit options to prevent UI lag
+
 // Optimized selectors with proper transformation logic
 const selectFilterData = createSelector(
   [
@@ -88,6 +93,33 @@ interface ImprovedTaskFiltersProps {
   className?: string;
 }
 
+// Enhanced debounce with cancellation support
+function createDebouncedFunction<T extends (...args: any[]) => void>(
+  func: T,
+  delay: number
+): T & { cancel: () => void } {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  
+  const debouncedFunc = ((...args: any[]) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      func(...args);
+      timeoutId = null;
+    }, delay);
+  }) as T & { cancel: () => void };
+  
+  debouncedFunc.cancel = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  
+  return debouncedFunc;
+}
+
 // Get real filter data from Redux state
 const useFilterData = (): FilterSection[] => {
   const { t } = useTranslation('task-list-filters');
@@ -111,7 +143,7 @@ const useFilterData = (): FilterSection[] => {
       {
         id: 'priority',
         label: 'Priority',
-        options: filterData.priorities.map((p: any) => ({
+        options: filterData.priorities.slice(0, MAX_FILTER_OPTIONS).map((p: any) => ({
           value: p.id,
           label: p.name,
           color: p.color_code,
@@ -128,7 +160,7 @@ const useFilterData = (): FilterSection[] => {
         multiSelect: true,
         searchable: true,
         selectedValues: currentAssignees.filter((m: any) => m.selected && m.id).map((m: any) => m.id || ''),
-        options: currentAssignees.map((assignee: any) => ({
+        options: currentAssignees.slice(0, MAX_FILTER_OPTIONS).map((assignee: any) => ({
           id: assignee.id || '',
           label: assignee.name || '',
           value: assignee.id || '',
@@ -143,7 +175,7 @@ const useFilterData = (): FilterSection[] => {
         multiSelect: true,
         searchable: true,
         selectedValues: currentLabels.filter((l: any) => l.selected && l.id).map((l: any) => l.id || ''),
-        options: currentLabels.map((label: any) => ({
+        options: currentLabels.slice(0, MAX_FILTER_OPTIONS).map((label: any) => ({
           id: label.id || '',
           label: label.name || '',
           value: label.id || '',
@@ -187,19 +219,23 @@ const FilterDropdown: React.FC<{
   const [filteredOptions, setFilteredOptions] = useState(section.options);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Filter options based on search term
-  useEffect(() => {
+  // Memoized filter function to prevent unnecessary recalculations
+  const filteredOptionsMemo = useMemo(() => {
     if (!section.searchable || !searchTerm.trim()) {
-      setFilteredOptions(section.options);
-      return;
+      return section.options;
     }
 
-    const filtered = section.options.filter(option =>
-      option.label.toLowerCase().includes(searchTerm.toLowerCase())
+    const searchLower = searchTerm.toLowerCase();
+    return section.options.filter(option =>
+      option.label.toLowerCase().includes(searchLower)
     );
-    setFilteredOptions(filtered);
   }, [searchTerm, section.options, section.searchable]);
 
+  // Update filtered options when memo changes
+  useEffect(() => {
+    setFilteredOptions(filteredOptionsMemo);
+  }, [filteredOptionsMemo]);
+
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -454,35 +490,28 @@ const SearchFilter: React.FC<{
   );
 };
 
-// Custom debounce implementation
-function debounce(func: (...args: any[]) => void, wait: number) {
-  let timeout: ReturnType<typeof setTimeout>;
-  return (...args: any[]) => {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func(...args), wait);
-  };
-}
-
 const LOCAL_STORAGE_KEY = 'worklenz.taskManagement.fields';
 
 const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({ themeClasses, isDarkMode }) => {
   const dispatch = useDispatch();
   const fieldsRaw = useSelector((state: RootState) => state.taskManagementFields);
   const fields = Array.isArray(fieldsRaw) ? fieldsRaw : [];
-  const sortedFields = [...fields].sort((a, b) => a.order - b.order);
+  const sortedFields = useMemo(() => [...fields].sort((a, b) => a.order - b.order), [fields]);
 
   const [open, setOpen] = React.useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Debounced save to localStorage using custom debounce
-  const debouncedSaveFields = useMemo(() => debounce((fieldsToSave: typeof fields) => {
-    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(fieldsToSave));
-  }, 300), []);
+  // Debounced save to localStorage using enhanced debounce
+  const debouncedSaveFields = useMemo(() => 
+    createDebouncedFunction((fieldsToSave: typeof fields) => {
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(fieldsToSave));
+    }, 300), 
+  []);
 
   useEffect(() => {
     debouncedSaveFields(fields);
     // Cleanup debounce on unmount
-    return () => { /* no cancel needed for custom debounce */ };
+    return () => debouncedSaveFields.cancel();
   }, [fields, debouncedSaveFields]);
 
   // Close dropdown on outside click
@@ -497,7 +526,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
     return () => document.removeEventListener('mousedown', handleClick);
   }, [open]);
 
-  const visibleCount = sortedFields.filter(field => field.visible).length;
+  const visibleCount = useMemo(() => sortedFields.filter(field => field.visible).length, [sortedFields]);
 
   return (
     <div className="relative" ref={dropdownRef}>
@@ -604,6 +633,11 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
   const [showArchived, setShowArchived] = useState(false);
   const [openDropdown, setOpenDropdown] = useState<string | null>(null);
   const [activeFiltersCount, setActiveFiltersCount] = useState(0);
+  const [clearingFilters, setClearingFilters] = useState(false);
+
+  // Refs for debounced functions
+  const debouncedFilterChangeRef = useRef<((projectId: string) => void) & { cancel: () => void } | null>(null);
+  const debouncedSearchChangeRef = useRef<((projectId: string, value: string) => void) & { cancel: () => void } | null>(null);
 
   // Get real filter data
   const filterSectionsData = useFilterData();
@@ -618,9 +652,13 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     return filterSectionsData;
   }, [filterSectionsData]);
 
+  // Only update filter sections if they have actually changed
   useEffect(() => {
-    setFilterSections(memoizedFilterSections);
-  }, [memoizedFilterSections]);
+    const hasChanged = JSON.stringify(filterSections) !== JSON.stringify(memoizedFilterSections);
+    if (hasChanged && memoizedFilterSections.length > 0) {
+      setFilterSections(memoizedFilterSections);
+    }
+  }, [memoizedFilterSections, filterSections]);
 
   // Redux selectors for theme and other state
   const isDarkMode = useAppSelector(state => state.themeReducer?.mode === 'dark');
@@ -649,12 +687,47 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     searchText: isDarkMode ? 'text-gray-200' : 'text-gray-900',
   }), [isDarkMode]);
 
-  // Calculate active filters count
+  // Initialize debounced functions
   useEffect(() => {
-    const count = filterSections.reduce((acc, section) => acc + section.selectedValues.length, 0);
-    setActiveFiltersCount(count + (searchValue ? 1 : 0));
+    // Debounced filter change function
+    debouncedFilterChangeRef.current = createDebouncedFunction((projectId: string) => {
+      dispatch(fetchTasksV3(projectId));
+    }, FILTER_DEBOUNCE_DELAY);
+
+    // Debounced search change function
+    debouncedSearchChangeRef.current = createDebouncedFunction((projectId: string, value: string) => {
+      // Dispatch search action based on current view
+      if (projectView === 'list') {
+        dispatch(setSearch(value));
+      } else {
+        dispatch(setBoardSearch(value));
+      }
+      
+      // Trigger task refetch with new search value
+      dispatch(fetchTasksV3(projectId));
+    }, SEARCH_DEBOUNCE_DELAY);
+
+    // Cleanup function
+    return () => {
+      debouncedFilterChangeRef.current?.cancel();
+      debouncedSearchChangeRef.current?.cancel();
+    };
+  }, [dispatch, projectView]);
+
+  // Calculate active filters count - memoized to prevent unnecessary recalculations
+  const calculatedActiveFiltersCount = useMemo(() => {
+    const count = filterSections.reduce((acc, section) => 
+      section.id === 'groupBy' ? acc : acc + section.selectedValues.length, 0
+    );
+    return count + (searchValue ? 1 : 0);
   }, [filterSections, searchValue]);
 
+  useEffect(() => {
+    if (activeFiltersCount !== calculatedActiveFiltersCount) {
+      setActiveFiltersCount(calculatedActiveFiltersCount);
+    }
+  }, [calculatedActiveFiltersCount, activeFiltersCount]);
+
   // Handlers
   const handleDropdownToggle = useCallback((sectionId: string) => {
     setOpenDropdown(current => current === sectionId ? null : sectionId);
@@ -668,49 +741,46 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
       return; // Do nothing
     }
 
-    // Update local state first
+    // Update local state first for immediate UI feedback
     setFilterSections(prev => prev.map(section => 
       section.id === sectionId 
         ? { ...section, selectedValues: values }
         : section
     ));
 
-    // Use task management slices for groupBy
+    // Use task management slices for groupBy (immediate, no debounce)
     if (sectionId === 'groupBy' && values.length > 0) {
       dispatch(setCurrentGrouping(values[0] as 'status' | 'priority' | 'phase'));
       dispatch(fetchTasksV3(projectId));
       return;
     }
 
-    // Handle priorities
+    // Handle priorities (with debounce)
     if (sectionId === 'priority') {
-      console.log('Priority selection changed:', { sectionId, values, projectId });
       dispatch(setPriorities(values));
-      dispatch(fetchTasksV3(projectId));
+      debouncedFilterChangeRef.current?.(projectId);
       return;
     }
 
-    // Handle assignees (members)
+    // Handle assignees (members) (with debounce)
     if (sectionId === 'assignees') {
-      // Update selected property for each assignee
       const updatedAssignees = currentTaskAssignees.map(member => ({
         ...member,
         selected: values.includes(member.id || '')
       }));
       dispatch(setMembers(updatedAssignees));
-      dispatch(fetchTasksV3(projectId));
+      debouncedFilterChangeRef.current?.(projectId);
       return;
     }
 
-    // Handle labels
+    // Handle labels (with debounce)
     if (sectionId === 'labels') {
-      // Update selected property for each label
       const updatedLabels = currentTaskLabels.map(label => ({
         ...label,
         selected: values.includes(label.id || '')
       }));
       dispatch(setLabels(updatedLabels));
-      dispatch(fetchTasksV3(projectId));
+      debouncedFilterChangeRef.current?.(projectId);
       return;
     }
   }, [dispatch, projectId, currentTaskAssignees, currentTaskLabels]);
@@ -720,57 +790,79 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
     
     if (!projectId) return;
     
-    // Dispatch search action based on current view
-    if (projectView === 'list') {
-      // For list view, use the tasks slice
-      dispatch(setSearch(value));
-    } else {
-      // For board view, use the board slice
-      dispatch(setBoardSearch(value));
-    }
-    
-    console.log('Search change:', value, { projectView, projectId });
-    
-    // Trigger task refetch with new search value
-    dispatch(fetchTasksV3(projectId));
-  }, [projectView, projectId, dispatch]);
+    // Use debounced search
+    debouncedSearchChangeRef.current?.(projectId, value);
+  }, [projectId]);
 
-  const clearAllFilters = useCallback(() => {
-    if (!projectId) return;
+  const clearAllFilters = useCallback(async () => {
+    if (!projectId || clearingFilters) return;
     
-    // Clear search
-    setSearchValue('');
-    if (projectView === 'list') {
-      dispatch(setSearch(''));
-    } else {
-      dispatch(setBoardSearch(''));
+    // Set loading state to prevent multiple clicks
+    setClearingFilters(true);
+    
+    try {
+      // Cancel any pending debounced calls
+      debouncedFilterChangeRef.current?.cancel();
+      debouncedSearchChangeRef.current?.cancel();
+      
+      // Batch all state updates together to prevent multiple re-renders
+      const batchUpdates = () => {
+        // Clear local state immediately for UI feedback
+        setSearchValue('');
+        setShowArchived(false);
+        
+        // Update local filter sections state immediately
+        setFilterSections(prev => prev.map(section => ({
+          ...section,
+          selectedValues: section.id === 'groupBy' ? section.selectedValues : [] // Keep groupBy, clear others
+        })));
+      };
+      
+      // Execute all local state updates in a batch
+      batchUpdates();
+      
+      // Prepare all Redux actions to be dispatched together
+      const reduxUpdates = () => {
+        // Clear search based on view
+        if (projectView === 'list') {
+          dispatch(setSearch(''));
+        } else {
+          dispatch(setBoardSearch(''));
+        }
+        
+        // Clear label filters
+        const clearedLabels = currentTaskLabels.map(label => ({
+          ...label,
+          selected: false
+        }));
+        dispatch(setLabels(clearedLabels));
+        
+        // Clear assignee filters
+        const clearedAssignees = currentTaskAssignees.map(member => ({
+          ...member,
+          selected: false
+        }));
+        dispatch(setMembers(clearedAssignees));
+        
+        // Clear priority filters
+        dispatch(setPriorities([]));
+      };
+      
+      // Execute Redux updates
+      reduxUpdates();
+      
+      // Use a short timeout to batch Redux state updates before API call
+      // This ensures all filter state is updated before the API call
+      setTimeout(() => {
+        dispatch(fetchTasksV3(projectId));
+        // Reset loading state after API call is initiated
+        setTimeout(() => setClearingFilters(false), 100);
+      }, 0);
+    } catch (error) {
+      console.error('Error clearing filters:', error);
+      setClearingFilters(false);
     }
-    
-    // Clear label filters
-    const clearedLabels = currentTaskLabels.map(label => ({
-      ...label,
-      selected: false
-    }));
-    dispatch(setLabels(clearedLabels));
-    
-    // Clear assignee filters
-    const clearedAssignees = currentTaskAssignees.map(member => ({
-      ...member,
-      selected: false
-    }));
-    dispatch(setMembers(clearedAssignees));
-    
-    // Clear priority filters
-    dispatch(setPriorities([]));
-    
-    // Clear other filters
-    setShowArchived(false);
-    
-    // Trigger task refetch with cleared filters
-    dispatch(fetchTasksV3(projectId));
-    
-    console.log('Clear all filters');
-  }, [projectId, projectView, dispatch, currentTaskLabels, currentTaskAssignees]);
+  }, [projectId, projectView, dispatch, currentTaskLabels, currentTaskAssignees, clearingFilters]);
 
   const toggleArchived = useCallback(() => {
     setShowArchived(!showArchived);
@@ -823,11 +915,16 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
               </span>
               <button
                 onClick={clearAllFilters}
-                className={`text-xs text-blue-600 hover:text-blue-700 font-medium transition-colors duration-150 ${
-                  isDarkMode ? 'text-blue-400 hover:text-blue-300' : ''
+                disabled={clearingFilters}
+                className={`text-xs font-medium transition-colors duration-150 ${
+                  clearingFilters 
+                    ? 'text-gray-400 cursor-not-allowed' 
+                    : isDarkMode 
+                      ? 'text-blue-400 hover:text-blue-300' 
+                      : 'text-blue-600 hover:text-blue-700'
                 }`}
               >
-                Clear all
+                {clearingFilters ? 'Clearing...' : 'Clear all'}
               </button>
             </div>
           )}
@@ -865,7 +962,19 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
               <SearchOutlined className="w-2.5 h-2.5" />
               <span>"{searchValue}"</span>
               <button
-                onClick={() => setSearchValue('')}
+                onClick={() => {
+                  setSearchValue('');
+                  if (projectId) {
+                    // Cancel pending search and immediately clear
+                    debouncedSearchChangeRef.current?.cancel();
+                    if (projectView === 'list') {
+                      dispatch(setSearch(''));
+                    } else {
+                      dispatch(setBoardSearch(''));
+                    }
+                    dispatch(fetchTasksV3(projectId));
+                  }
+                }}
                 className={`ml-1 rounded-full p-0.5 transition-colors duration-150 ${
                   isDarkMode ? 'hover:bg-blue-800' : 'hover:bg-blue-200'
                 }`}
@@ -896,6 +1005,14 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
                     <span>{option.label}</span>
                     <button
                       onClick={() => {
+                        // Update local state immediately for UI feedback
+                        setFilterSections(prev => prev.map(s => 
+                          s.id === section.id 
+                            ? { ...s, selectedValues: s.selectedValues.filter(v => v !== value) }
+                            : s
+                        ));
+                        
+                        // Use debounced API call
                         const newValues = section.selectedValues.filter(v => v !== value);
                         handleSelectionChange(section.id, newValues);
                       }}