Merge pull request #173 from Worklenz/imp/task-list-performance-fixes

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

worklenz-frontend/index.html

@@ -13,7 +13,7 @@
   <title>Worklenz</title>
 
   <!-- Environment configuration -->
-  <script src="/env-config.js"></script>
+  <script type="module" src="/env-config.js"></script>
   <!-- Unregister service worker -->
   <script src="/unregister-sw.js"></script>
   <!-- Microsoft Clarity -->

worklenz-frontend/src/app/routes/not-found-route.tsx

@@ -1,10 +1,16 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { RouteObject } from 'react-router-dom';
-import NotFoundPage from '@/pages/404-page/404-page';
+import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
+
+const NotFoundPage = lazy(() => import('@/pages/404-page/404-page'));
 
 const notFoundRoute: RouteObject = {
   path: '*',
-  element: <NotFoundPage />,
+  element: (
+    <Suspense fallback={<SuspenseFallback />}>
+      <NotFoundPage />
+    </Suspense>
+  ),
 };
 
 export default notFoundRoute;

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

@@ -1,6 +1,7 @@
-import { useEffect, useState, useRef, 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 {
@@ -553,7 +554,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" />

worklenz-frontend/vite.config.ts

@@ -72,7 +72,7 @@ export default defineConfig(({ command, mode }) => {
         output: {
           // **Optimized Chunking Strategy**
           manualChunks(id) {
-            // Core React libraries
+            // Core React libraries - keep together to avoid dependency issues
             if (id.includes('react') || id.includes('react-dom')) {
               return 'react-vendor';
             }
@@ -82,16 +82,11 @@ export default defineConfig(({ command, mode }) => {
               return 'react-router';
             }
             
-            // Ant Design (keep separate for better caching)
-            if (id.includes('antd') && !id.includes('@ant-design/icons')) {
+            // Ant Design and Icons together to share React context
+            if (id.includes('antd') || id.includes('@ant-design/icons')) {
               return 'antd';
             }
             
-            // Icons (if using ant design icons)
-            if (id.includes('@ant-design/icons')) {
-              return 'antd-icons';
-            }
-            
             // Internationalization
             if (id.includes('i18next')) {
               return 'i18n';
@@ -124,6 +119,9 @@ export default defineConfig(({ command, mode }) => {
         
         // **External dependencies (if any should be externalized)**
         external: [],
+        
+        // **Preserve modules to avoid context issues**
+        preserveEntrySignatures: 'strict',
       },
 
       // **Experimental features for better performance**
@@ -138,10 +136,15 @@ export default defineConfig(({ command, mode }) => {
       include: [
         'react',
         'react-dom',
+        'react/jsx-runtime',
+        'antd',
+        '@ant-design/icons',
       ],
       exclude: [
         // Add any packages that should not be pre-bundled
       ],
+      // Force pre-bundling to avoid runtime issues
+      force: true,
     },
 
     // **Define global constants**