Hi, I checked but I'm still experiencing the issue. I've tried multiple approaches, but the problem persists in my basic Gantt implementation.
Could you try dragging tasks in your environment? You might notice performance issues where frames drop during task dragging. It appears to be either a re-render problem or a sudden layout shift.
For example, at 2.69 seconds the dragging is smooth, but after 0.10 seconds I can see the visual element change position and then snap back unexpectedly.
This is my minimal component, and even with that I can see the performance drop. I'm using my other implementation with more functionality, but the issue still persists and sometimes it actually interferes with the workflow.
import { Gantt, Willow } from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";
const scales = [
{
unit: "month",
step: 1,
format: "MMM yyyy",
},
{ unit: "day", step: 1, format: "d" },
];
const tasks = [
{
id: 1,
text: "Preparing Venue",
start: new Date(2024, 5, 10),
end: new Date(2024, 5, 12),
duration: 2,
progress: 90,
parent: 0,
type: "summary",
lazy: false,
},
{
id: 11,
text: "Stage Setup",
start: new Date(2024, 5, 10),
end: new Date(2024, 5, 11),
duration: 1,
progress: 100,
parent: 1,
type: "task",
lazy: false,
},
{
id: 12,
text: "Technical Setup",
start: new Date(2024, 5, 11),
end: new Date(2024, 5, 12),
duration: 1,
progress: 100,
parent: 1,
type: "task",
lazy: false,
},
{
id: 13,
text: "Decoration",
start: new Date(2024, 5, 11),
end: new Date(2024, 5, 12),
duration: 1,
progress: 85,
parent: 1,
type: "task",
lazy: false,
},
{
id: 2,
text: "Rehearsal Session",
start: new Date(2024, 5, 12),
end: new Date(2024, 5, 15),
duration: 3,
progress: 60,
parent: 0,
type: "summary",
lazy: false,
},
{
id: 21,
text: "Speakers Rehearsal",
start: new Date(2024, 5, 12),
end: new Date(2024, 5, 13),
duration: 1,
progress: 100,
parent: 2,
type: "task",
lazy: false,
},
{
id: 22,
text: "Sound Check",
start: new Date(2024, 5, 13),
end: new Date(2024, 5, 13),
duration: 0,
progress: 0,
parent: 2,
type: "milestone",
lazy: false,
},
{
id: 23,
text: "Full Run-through",
start: new Date(2024, 5, 13),
end: new Date(2024, 5, 15),
duration: 2,
progress: 40,
parent: 2,
type: "task",
lazy: false,
},
{
id: 3,
text: "Conference Day",
start: new Date(2024, 5, 15),
end: new Date(2024, 5, 20),
duration: 5,
progress: 0,
parent: 0,
type: "summary",
lazy: false,
},
{
id: 31,
text: "Catering setup",
start: new Date(2024, 5, 15),
end: new Date(2024, 5, 16),
duration: 1,
progress: 0,
parent: 3,
type: "task",
lazy: false,
},
{
id: 32,
text: "Tech Check",
start: new Date(2024, 5, 16),
end: new Date(2024, 5, 17),
duration: 1,
progress: 0,
parent: 3,
type: "task",
lazy: false,
},
{
id: 33,
text: "Registration",
start: new Date(2024, 5, 17),
end: new Date(2024, 5, 18),
duration: 1,
progress: 0,
parent: 3,
type: "task",
lazy: false,
},
{
id: 34,
text: "Main Conference",
start: new Date(2024, 5, 18),
end: new Date(2024, 5, 19),
duration: 1,
progress: 0,
parent: 3,
type: "task",
lazy: false,
},
{
id: 35,
text: "Closing Ceremony",
start: new Date(2024, 5, 19),
end: new Date(2024, 5, 19),
duration: 0,
progress: 0,
parent: 3,
type: "milestone",
lazy: false,
},
];
export const MinimalGantt = () => {
return (
<>
<Willow>
<Gantt tasks={tasks} scales={scales} />
</Willow>
</>
);
};
