feat(performance): implement various performance optimizations across components

- Added a new `usePerformanceOptimization` hook for tracking render performance, debouncing, throttling, and optimized selectors to reduce unnecessary re-renders.
- Enhanced `ProjectGroupList` and `ProjectList` components with preloading of project view and task management components on hover for smoother navigation.
- Updated `TaskListBoard` to import `ImprovedTaskFilters` synchronously, avoiding suspense issues.
- Introduced a `resetTaskDrawer` action in the task drawer slice for better state management.
- Improved layout and positioning in `SuspenseFallback` for better user experience during loading states.
- Documented performance optimizations in `PERFORMANCE_OPTIMIZATIONS.md` outlining key improvements and metrics.
This commit is contained in:
chamikaJ
2025-06-27 13:12:47 +05:30
parent fdb485614f
commit 7e44d53bb3
9 changed files with 681 additions and 118 deletions

View File

@@ -45,12 +45,8 @@ import VirtualizedTaskList from './virtualized-task-list';
import { AppDispatch } from '@/app/store';
import { shallowEqual } from 'react-redux';
// Import the improved TaskListFilters component
const ImprovedTaskFilters = React.lazy(
() => import('./improved-task-filters')
);
// Import the improved TaskListFilters component synchronously to avoid suspense
import ImprovedTaskFilters from './improved-task-filters';
interface TaskListBoardProps {
projectId: string;
@@ -393,9 +389,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
{/* Task Filters */}
<div className="mb-4">
<React.Suspense fallback={<div>Loading filters...</div>}>
<ImprovedTaskFilters position="list" />
</React.Suspense>
<ImprovedTaskFilters position="list" />
</div>
{/* Virtualized Task Groups Container */}