Performance Issues with GanttComponent (Loading 200+ Rows Takes ~15 Seconds)

[belt-basya]

Hi,

I'm using the GanttComponent in my project, and I'm experiencing performance issues when loading a dataset of around 200 rows. The initial load takes approximately 15 seconds, which seems excessive.

I've reviewed the documentation and know about enableVirtualization, but I'm looking for additional ways to optimize the performance.

Implementation Details

1. I’ve customized the headers and rows using templates (code below).
2. My dataset is provided through ref.current.dataSource.
3. There are 12 columns in total (only one is shown in the example).
4. The component includes custom tooltips and various style customizations.

Here’s a simplified version of my code:

const Gantt = forwardRef((props, ref) => {
  const headerTemplate = useCallback((args) => {
    switch (args.field) {
      case "name": {
        return (
          <Box
            sx={{
              alignItems: "flex-start",
              display: "flex",
              flexDirection: "row",
              gap: "10px",
              justifyContent: "space-between",
              overflow: "hidden",
            }}
          >
            <Box
              sx={{
                flex: 1,
                textOverflow: "ellipsis",
                overflow: "hidden",
              }}
            >
              {tTest("Names")}
            </Box>
          </Box>
        );
      }
      default:
        break;
    }
    return null;
  }, []);

  const template = useCallback((field) => (args) => {
    switch (field) {
      case "name":
        return (
          <Box
            sx={{
              alignItems: "center",
              display: "flex",
              flexDirection: "row",
              gap: "10px",
              justifyContent: "space-between",
              overflow: "hidden",
            }}
          >
            <Tooltip name={args.taskData.name}>{args.taskData.name}</Tooltip>
          </Box>
        );
      default:
        break;
    }
    return null;
  }, []);

  const settings = useMemo(() => ({
    allowSelection: false,
    columns: [
      {
        autoFit: true,
        field: "name",
        headerTemplate,
        isPrimaryKey: true,
        template: template("name"),
        visible: true,
        width: "500px",
      },
    ],
    taskFields: {
      id: "id",
      name: "name",
      startDate: "startDate",
      duration: "duration",
      progress: "progress",
      child: "child",
    },
    width: "100%",
    gridLines: "Both",
    tooltipSettings: {
      showTooltip: true,
    },
  }), []);

  return (
    <Box sx={{ display: "flex", flexDirection: "row", flexGrow: 1, overflow: "hidden" }}>
      <GanttComponent {...settings}>
        <Inject services={[DayMarkers]} />
      </GanttComponent>
    </Box>
  );
});

Questions

1. Are there any best practices for improving the initial load performance of the GanttComponent?
2. Could the custom templates (header and row) impact performance, and is there a more efficient way to handle them?
3. Are there specific settings or configurations in the GanttComponent that I might be overlooking?

Any advice or suggestions from the contributors or community would be greatly appreciated!

Thank you for your time and help.