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

@@ -437,6 +437,21 @@ const ProjectList: React.FC = () => {
}
}, [navigate]);
// Preload project view components on hover for smoother navigation
const handleProjectHover = useCallback((project_id: string | undefined) => {
if (project_id) {
// Preload the project view route to reduce loading time
import('@/pages/projects/projectView/project-view').catch(() => {
// Silently fail if preload doesn't work
});
// Also preload critical task management components
import('@/components/task-management/task-list-board').catch(() => {
// Silently fail if preload doesn't work
});
}
}, []);
// Define table columns directly in the component to avoid hooks order issues
const tableColumns: ColumnsType<IProjectViewModel> = useMemo(
() => [
@@ -629,6 +644,7 @@ const ProjectList: React.FC = () => {
locale={{ emptyText }}
onRow={record => ({
onClick: () => navigateToProject(record.id, record.team_member_default_view),
onMouseEnter: () => handleProjectHover(record.id),
})}
/>
) : (