feat(lazy-loading): implement lazy loading and suspense for improved performance

- Added lazy loading for NotFoundPage and TaskListFilters components to enhance initial load times.
- Wrapped lazy-loaded components in Suspense boundaries to provide loading states and improve user experience.
- Updated Vite configuration to optimize chunking strategy and preserve module signatures for better dependency management.

worklenz-frontend/src/pages/projects/projectView/board/project-view-board.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import { useEffect, useState, useRef, useMemo, useCallback, lazy, Suspense } from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
-import TaskListFilters from '../taskList/task-list-filters/task-list-filters';
+
+const TaskListFilters = lazy(() => import('../taskList/task-list-filters/task-list-filters'));
 import { Flex, Skeleton } from 'antd';
 import BoardSectionCardContainer from './board-section/board-section-container';
 import {
@@ -537,7 +538,9 @@ const ProjectViewBoard = () => {
 
   return (
     <Flex vertical gap={16}>
-      <TaskListFilters position={'board'} />
+      <Suspense fallback={<div>Loading filters...</div>}>
+        <TaskListFilters position={'board'} />
+      </Suspense>
       <Skeleton active loading={isLoading} className='mt-4 p-4'>
         <DndContext
           sensors={sensors}

worklenz-frontend/src/pages/projects/projectView/taskList/project-view-task-list.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo, lazy, Suspense } from 'react';
 import Flex from 'antd/es/flex';
 import Skeleton from 'antd/es/skeleton';
 import { useSearchParams } from 'react-router-dom';
 
-import TaskListFilters from './task-list-filters/task-list-filters';
+const TaskListFilters = lazy(() => import('./task-list-filters/task-list-filters'));
 import TaskGroupWrapperOptimized from './task-group-wrapper-optimized';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -100,7 +100,9 @@ const ProjectViewTaskList = () => {
   return (
     <Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
       {/* Filters load independently and don't block the main content */}
-      <TaskListFilters position="list" />
+      <Suspense fallback={<div>Loading filters...</div>}>
+        <TaskListFilters position="list" />
+      </Suspense>
 
       {isEmptyState ? (
         <Empty description="No tasks group found" />