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.

worklenz-frontend/src/components/project-list/project-group/project-group-list.tsx

@@ -55,6 +55,20 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
   loading,
   t
 }) => {
+  // Preload project view components on hover for smoother navigation
+  const handleProjectHover = React.useCallback((project_id: string) => {
+    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
+      });
+    }
+  }, []);
   const { token } = theme.useToken();
   const themeMode = useAppSelector(state => state.themeReducer.mode);
   const dispatch = useAppDispatch();
@@ -360,6 +374,8 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
             if (actionButtons) {
               actionButtons.style.opacity = '1';
             }
+            // Preload components for smoother navigation
+            handleProjectHover(project.id);
           }}
           onMouseLeave={(e) => {
             Object.assign(e.currentTarget.style, styles.projectCard);

worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx

@@ -7,6 +7,8 @@ export const SuspenseFallback = memo(() => {
     <div 
       style={{
         position: 'fixed',
+        top: 0,
+        left: 0,
         width: '100vw',
         height: '100vh',
         display: 'flex',

worklenz-frontend/src/components/task-management/task-list-board.tsx

@@ -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 */}