208a6db1a6
- Introduced kanbanMode prop to AssigneeSelector and LazyAssigneeSelectorWrapper for improved functionality in Kanban view. - Updated EnhancedKanbanTaskCard and TaskCard components to utilize the new kanbanMode prop. - Adjusted task sorting logic to handle cases where sort_order may be undefined, ensuring robust behavior during task updates.
85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import React, { useState, useCallback, Suspense } from 'react';
|
|
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(() =>
|
|
import('@/components/AssigneeSelector').then(module => ({ default: module.default }))
|
|
);
|
|
|
|
interface LazyAssigneeSelectorProps {
|
|
task: IProjectTask;
|
|
groupId?: string | null;
|
|
isDarkMode?: boolean;
|
|
kanbanMode?: boolean; // <-- Add this prop
|
|
}
|
|
|
|
// Lightweight loading placeholder
|
|
const LoadingPlaceholder: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => (
|
|
<div
|
|
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'
|
|
}
|
|
`}
|
|
>
|
|
<PlusOutlined className="text-xs" />
|
|
</div>
|
|
);
|
|
|
|
const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({
|
|
task,
|
|
groupId = null,
|
|
isDarkMode = false,
|
|
kanbanMode = false, // <-- Default to 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]
|
|
);
|
|
|
|
// If not loaded yet, show a simple placeholder button
|
|
if (!hasLoadedOnce) {
|
|
return (
|
|
<button
|
|
onClick={handleInteraction}
|
|
onMouseEnter={handleInteraction} // Preload on hover for better UX
|
|
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'
|
|
}
|
|
`}
|
|
title="Add assignee"
|
|
>
|
|
<PlusOutlined className="text-xs" />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// Once loaded, show the full component
|
|
return (
|
|
<Suspense fallback={<LoadingPlaceholder isDarkMode={isDarkMode} />}>
|
|
<LazyAssigneeSelector task={task} groupId={groupId} isDarkMode={isDarkMode} kanbanMode={kanbanMode} />
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
export default LazyAssigneeSelectorWrapper;
|