Merge branch 'release/v2.0.4' into refact/board-task-card-performance

2025-06-26 09:50:30 +05:30
parent 208d1ad5d4 8c02ad9291
commit 1e15630708
10 changed files with 381 additions and 199 deletions
--- 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
--- 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,
+  return (
+    <div 
+      style={{
+        position: 'fixed',
        width: '100vw',
        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
        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%)',
-  }), []);
+        zIndex: 9999,
+      }}
+    >
+      <Spin size="large" />
+    </div>
+  );
+});

+// Lightweight fallback for internal components that doesn't cover the screen
+export const InlineSuspenseFallback = memo(() => {
  return (
-    <ConfigProvider theme={themeConfig}>
-      <Layout className="app-loading-container" style={layoutStyle}>
-        <Spin size="large" style={spinStyle} />
-      </Layout>
-    </ConfigProvider>
+    <div 
+      style={{
+        padding: '40px 20px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '200px',
+      }}
+    >
+      <Spin size="large" />
+    </div>
  );
 });

 SuspenseFallback.displayName = 'SuspenseFallback';
+InlineSuspenseFallback.displayName = 'InlineSuspenseFallback';
--- a/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
+++ b/worklenz-frontend/src/components/task-management/improved-task-filters.tsx
@@ -14,33 +14,20 @@ 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 { fetchTasksV3, setSearch as setTaskManagementSearch } 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 { fetchLabelsByProject, fetchTaskAssignees, setMembers, setLabels, setSearch, setPriorities } 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';
@@ -57,6 +44,11 @@ import {
  fetchEnhancedKanbanGroups,
 } from '@/features/enhanced-kanban/enhanced-kanban.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(
  [
@@ -68,7 +60,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,
@@ -78,8 +69,7 @@ const selectFilterData = createSelector(
    boardLabels,
    taskAssignees,
    boardAssignees,
-    project,
-    selectedPriorities
+    project
  ) => ({
    priorities: priorities || [],
    taskPriorities: taskPriorities || [],
@@ -89,7 +79,7 @@ const selectFilterData = createSelector(
    taskAssignees: taskAssignees || [],
    boardAssignees: boardAssignees || [],
    project,
-    selectedPriorities: selectedPriorities || [],
+    selectedPriorities: taskPriorities || [], // Use taskReducer.priorities as selected priorities
  })
 );

@@ -119,6 +109,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 = (position: 'board' | 'list'): FilterSection[] => {
  const { t } = useTranslation('task-list-filters');
@@ -267,6 +284,7 @@ const useFilterData = (position: 'board' | 'list'): FilterSection[] => {
      ];
    }
  }, [isBoard, kanbanState, kanbanProject, filterData, currentProjectView, t, currentGrouping]);
+
 };

 // Filter Dropdown Component
@@ -283,19 +301,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) => {
@@ -550,35 +572,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) => {
+  // Debounced save to localStorage using enhanced debounce
+  const debouncedSaveFields = useMemo(() => 
+    createDebouncedFunction((fieldsToSave: typeof fields) => {
      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(fieldsToSave));
-  }, 300), []);
+    }, 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
@@ -593,7 +608,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}>
@@ -686,13 +701,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();
@@ -703,6 +715,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(position);
@@ -717,15 +734,18 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
    return filterSectionsData;
  }, [filterSectionsData]);

+  // Only update filter sections if they have actually changed
  useEffect(() => {
+    const hasChanged = JSON.stringify(filterSections) !== JSON.stringify(memoizedFilterSections);
+    if (hasChanged && memoizedFilterSections.length > 0) {
      setFilterSections(memoizedFilterSections);
-  }, [memoizedFilterSections]);
+    }
+  }, [memoizedFilterSections, filterSections]);

  // Redux selectors for theme and other state
  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(() => ({
@@ -749,12 +769,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);
@@ -819,26 +874,96 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
        dispatch(fetchTasksV3(projectId));
        return;
      }
+
    }
  }, [dispatch, projectId, position, currentTaskAssignees, currentTaskLabels]);

  const handleSearchChange = useCallback((value: string) => {
    setSearchValue(value);
+
+    
+    if (!projectId) return;
+      
    if (position === 'board') {
      dispatch(setKanbanSearch(value));
      dispatch(fetchEnhancedKanbanGroups(projectId));
    } else {
-      // ... existing logic ...
-      // TODO: Implement proper search dispatch for list
+      // Use debounced search
+      debouncedSearchChangeRef.current?.(projectId, value);
    }
+    
+    
  }, [dispatch, projectId, position]);

-  const clearAllFilters = useCallback(() => {
-    // TODO: Implement clear all filters
-    console.log('Clear all filters');
+  const clearAllFilters = useCallback(async () => {
+    if (!projectId || clearingFilters) return;
+    
+    // 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);
+    }
+  }, [projectId, projectView, dispatch, currentTaskLabels, currentTaskAssignees, clearingFilters]);

  const toggleArchived = useCallback(() => {
    setShowArchived(!showArchived);
@@ -850,13 +975,6 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
    }
  }, [dispatch, projectId, position, 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}`}>
      <div className="flex flex-wrap items-center gap-2">
@@ -902,11 +1020,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>
          )}
@@ -944,7 +1067,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'
                }`}
@@ -975,6 +1110,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);
                      }}
--- 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
@@ -140,20 +141,24 @@ 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(',')
+      // Get selected priorities from taskReducer (consistent with other slices)
+      const selectedPriorities = state.taskReducer.priorities
+        ? state.taskReducer.priorities.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;
--- 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)
+    ),
  },
 ];
--- 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>
      <Skeleton active loading={isLoading} className='mt-4 p-4'>
        <DndContext
          sensors={sensors}
--- 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,
--- 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 {
+        // Only refetch if filters change, not on initial load
+        if (coreDataLoaded) {
          await dispatch(fetchTaskGroups(projectId));
+        }
      } catch (error) {
        console.error('Error fetching task groups:', error);
      }
    };

+    // Only refetch when filters change
+    if (coreDataLoaded) {
      fetchTasks();
-  }, [projectId, groupBy, projectView, dispatch, fields, search, archived, initialLoadComplete]);
+    }
+  }, [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>}>
+      {/* Filters load synchronously - no suspense boundary */}
      <TaskListFilters position="list" />
-      </Suspense>

      {isEmptyState ? (
        <Empty description="No tasks group found" />
--- 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
+          // Stagger the loading to prevent overwhelming the server
+          // Load project-specific data with delays
+          setTimeout(() => {
            dispatch(fetchLabelsByProject(projectId));
-          dispatch(fetchTaskAssignees(projectId));
-        }
+          }, 100);

-        // Load team members (usually needed for member filters)
+          setTimeout(() => {
+            dispatch(fetchTaskAssignees(projectId));
+          }, 200);
+
+          // Load team members last (heaviest query)
+          setTimeout(() => {
            dispatch(getTeamMembers({ 
              index: 0, 
-          size: 100, 
+              size: 50, // Reduce initial load size
              field: null, 
              order: null, 
              search: null, 
-          all: true 
+              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 (
--- 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 {