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

Merge pull request #112 from chamikaJ/imp/task-list-loading-improvement

Browse Source 
Enhance task list loading state management
This commit is contained in:
Chamika J
2025-05-07 15:47:37 +05:30
committed by GitHub
parent c8380e1c30 2b82ff699e
commit d1136a549a
1 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
import Flex from 'antd/es/flex'; import Flex from 'antd/es/flex';
import Skeleton from 'antd/es/skeleton'; import Skeleton from 'antd/es/skeleton';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
@@ -17,6 +17,8 @@ const ProjectViewTaskList = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { projectView } = useTabSearchParam(); const { projectView } = useTabSearchParam();
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
// Add local loading state to immediately show skeleton
const [isLoading, setIsLoading] = useState(true);
const { projectId } = useAppSelector(state => state.projectReducer); const { projectId } = useAppSelector(state => state.projectReducer);
const { taskGroups, loadingGroups, groupBy, archived, fields, search } = useAppSelector( const { taskGroups, loadingGroups, groupBy, archived, fields, search } = useAppSelector(
@@ -38,26 +40,40 @@ const ProjectViewTaskList = () => {
}, [projectView, searchParams, setSearchParams]); }, [projectView, searchParams, setSearchParams]);
useEffect(() => { useEffect(() => {
if (projectId && groupBy) { // Set loading state based on all loading conditions
if (!loadingColumns) dispatch(fetchTaskListColumns(projectId)); setIsLoading(loadingGroups || loadingColumns || loadingPhases || loadingStatusCategories);
if (!loadingPhases) dispatch(fetchPhasesByProjectId(projectId)); }, [loadingGroups, loadingColumns, loadingPhases, loadingStatusCategories]);
if (!loadingGroups && projectView === 'list') {
dispatch(fetchTaskGroups(projectId)); useEffect(() => {
const loadData = async () => {
if (projectId && groupBy) {
const promises = [];
if (!loadingColumns) promises.push(dispatch(fetchTaskListColumns(projectId)));
if (!loadingPhases) promises.push(dispatch(fetchPhasesByProjectId(projectId)));
if (!loadingGroups && projectView === 'list') {
promises.push(dispatch(fetchTaskGroups(projectId)));
}
if (!statusCategories.length) {
promises.push(dispatch(fetchStatusesCategories()));
}
// Wait for all data to load
await Promise.all(promises);
} }
} };
if (!statusCategories.length) {
dispatch(fetchStatusesCategories()); loadData();
}
}, [dispatch, projectId, groupBy, fields, search, archived]); }, [dispatch, projectId, groupBy, fields, search, archived]);
return ( return (
<Flex vertical gap={16} style={{ overflowX: 'hidden' }}> <Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
<TaskListFilters position="list" /> <TaskListFilters position="list" />
{(taskGroups && taskGroups.length === 0 && !loadingGroups) ? ( {(taskGroups && taskGroups.length === 0 && !isLoading) ? (
<Empty description="No tasks group found" /> <Empty description="No tasks group found" />
) : ( ) : (
<Skeleton active loading={loadingGroups} className='mt-4 p-4'> <Skeleton active loading={isLoading} className='mt-4 p-4'>
<TaskGroupWrapper taskGroups={taskGroups} groupBy={groupBy} /> <TaskGroupWrapper taskGroups={taskGroups} groupBy={groupBy} />
</Skeleton> </Skeleton>
)} )}