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

expand sub tasks

Browse Source
This commit is contained in:
chamiakJ
2025-07-03 01:31:05 +05:30
parent 3bef18901a
commit ecd4d29a38
435 changed files with 13150 additions and 11087 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
worklenz-frontend/src/components/task-management/lazy-assignee-selector.tsx
View File

@@ -3,7 +3,7 @@ import { PlusOutlined } from '@ant-design/icons';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
// Lazy load the existing AssigneeSelector component only when needed (Asana-style)
const LazyAssigneeSelector = React.lazy(() =>
const LazyAssigneeSelector = React.lazy(() =>
import('@/components/AssigneeSelector').then(module => ({ default: module.default }))
);
@@ -19,9 +19,10 @@ const LoadingPlaceholder: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) =
className={`
w-5 h-5 rounded-full border border-dashed flex items-center justify-center
transition-colors duration-200 animate-pulse
${isDarkMode
? 'border-gray-600 bg-gray-800 text-gray-400'
: 'border-gray-300 bg-gray-100 text-gray-600'
${
isDarkMode
? 'border-gray-600 bg-gray-800 text-gray-400'
: 'border-gray-300 bg-gray-100 text-gray-600'
}
`}
>
@@ -29,21 +30,24 @@ const LoadingPlaceholder: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) =
</div>
);
const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({
task,
groupId = null,
isDarkMode = false
const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({
task,
groupId = null,
isDarkMode = false,
}) => {
const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
const [showComponent, setShowComponent] = useState(false);
const handleInteraction = useCallback((e: React.MouseEvent) => {
// Don't prevent the event from bubbling, just mark as loaded
if (!hasLoadedOnce) {
setHasLoadedOnce(true);
setShowComponent(true);
}
}, [hasLoadedOnce]);
const handleInteraction = useCallback(
(e: React.MouseEvent) => {
// Don't prevent the event from bubbling, just mark as loaded
if (!hasLoadedOnce) {
setHasLoadedOnce(true);
setShowComponent(true);
}
},
[hasLoadedOnce]
);
// If not loaded yet, show a simple placeholder button
if (!hasLoadedOnce) {
@@ -54,9 +58,10 @@ const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({
className={`
w-5 h-5 rounded-full border border-dashed flex items-center justify-center
transition-colors duration-200
${isDarkMode
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
${
isDarkMode
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
}
`}
title="Add assignee"
@@ -69,13 +74,9 @@ const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({
// Once loaded, show the full component
return (
<Suspense fallback={<LoadingPlaceholder isDarkMode={isDarkMode} />}>
<LazyAssigneeSelector
task={task}
groupId={groupId}
isDarkMode={isDarkMode}
/>
<LazyAssigneeSelector task={task} groupId={groupId} isDarkMode={isDarkMode} />
</Suspense>
);
};
export default LazyAssigneeSelectorWrapper;
export default LazyAssigneeSelectorWrapper;