bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(assignee-selector, suspense-fallback, project-view): optimize component loading and enhance user experience

Browse Source 
- Integrated synchronous imports for TaskListFilters and filter dropdowns to improve performance and reduce loading times.
- Refactored AssigneeSelector to include a new invite member drawer functionality, enhancing user interaction.
- Simplified SuspenseFallback components for better loading experiences, ensuring they do not block the main UI.
- Updated project view constants to utilize InlineSuspenseFallback for lazy-loaded components, improving rendering efficiency.
This commit is contained in:
chamikaJ
2025-06-25 17:08:40 +05:30
parent 3c7cacc46f
commit 44527f68cf
6 changed files with 144 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
worklenz-frontend/src/lib/project/project-view-constants.ts
View File

@@ -1,12 +1,15 @@
import React, { ReactNode } from 'react';
import React, { ReactNode, Suspense } from 'react';
import { InlineSuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
// Lazy load all project view components to reduce initial bundle size
// Import core components synchronously to avoid suspense in main tabs
import ProjectViewEnhancedTasks from '@/pages/projects/projectView/enhancedTasks/project-view-enhanced-tasks';
import ProjectViewEnhancedBoard from '@/pages/projects/projectView/enhancedBoard/project-view-enhanced-board';
// Lazy load less critical components
const ProjectViewInsights = React.lazy(() => import('@/pages/projects/projectView/insights/project-view-insights'));
const ProjectViewFiles = React.lazy(() => import('@/pages/projects/projectView/files/project-view-files'));
const ProjectViewMembers = React.lazy(() => import('@/pages/projects/projectView/members/project-view-members'));
const ProjectViewUpdates = React.lazy(() => import('@/pages/projects/project-view-1/updates/project-view-updates'));
const ProjectViewEnhancedTasks = React.lazy(() => import('@/pages/projects/projectView/enhancedTasks/project-view-enhanced-tasks'));
const ProjectViewEnhancedBoard = React.lazy(() => import('@/pages/projects/projectView/enhancedBoard/project-view-enhanced-board'));
// type of a tab items
type TabItems = {
@@ -37,24 +40,36 @@ export const tabItems: TabItems[] = [
index: 2,
key: 'project-insights-member-overview',
label: 'Insights',
element: React.createElement(ProjectViewInsights),
element: React.createElement(Suspense,
{ fallback: React.createElement(InlineSuspenseFallback) },
React.createElement(ProjectViewInsights)
),
},
{
index: 3,
key: 'all-attachments',
label: 'Files',
element: React.createElement(ProjectViewFiles),
element: React.createElement(Suspense,
{ fallback: React.createElement(InlineSuspenseFallback) },
React.createElement(ProjectViewFiles)
),
},
{
index: 4,
key: 'members',
label: 'Members',
element: React.createElement(ProjectViewMembers),
element: React.createElement(Suspense,
{ fallback: React.createElement(InlineSuspenseFallback) },
React.createElement(ProjectViewMembers)
),
},
{
index: 5,
key: 'updates',
label: 'Updates',
element: React.createElement(ProjectViewUpdates),
element: React.createElement(Suspense,
{ fallback: React.createElement(InlineSuspenseFallback) },
React.createElement(ProjectViewUpdates)
),
},
];