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.

[Jayakumar-Duraisamy]

Hi @belt-basya

Greetings from Syncfusion.

For your query, we prepared a sample with 210 records, enabling both virtualization and timeline virtualization. We also applied column templates, taskbar templates, and header templates. During testing, the initial load time remained within 1 second, with no noticeable delays. (refer sample)

Query 1 - Are there any best practices for improving the initial load performance of the GanttComponent?

Query 3 - Are there specific settings or configurations in the GanttComponent that I might be overlooking?

1. Enable Virtual Scrolling

Virtual scrolling helps in rendering only the visible rows rather than loading all tasks at once.

Demo - Gantt Chart · Virtual Scroll · Syncfusion React UI Components

2. Use Big Data set

Instead of loading the entire dataset initially, fetch and load data on demand.

Demo - Gantt Chart · Virtual Scroll · Syncfusion React UI Components

Documentation - Data binding in React Gantt component | Syncfusion

3. Disable Unused Features

If you don’t need certain features, disable them: "Sorting, Resizing, ColumnMenu etc."

4. Avoiding calculation times:

Minimize the rendering of predecessor links if there are too many: by using enablePredecessorValidation property. To disable entire date calculation use autoCalculateDateScheduling property.

Code-Snippet:
`enablePredecessorValidation: false, // remove the predecessor calculation.

autoCalculateDateScheduling: false, // avoid entire date calculation and render the records as per the dates given in the datasource.`

5. Reduce Timeline Units

Use a broader timeline view (week/month instead of day/hour):

Code-Snippet:
`timelineSettings: {

timelineViewMode: 'Month', // Use ‘Month’ instead of ‘Day’ updateTimescaleView: true

}`

Documentation - Data binding in React Gantt component | Syncfusion

Query 2 - Could the custom templates (header and row) impact performance, and is there a more efficient way to handle them?

Yes, applying templates to multiple columns may impact performance. To optimize it, consider using templates only for essential columns and removing unnecessary ones.

To know more about the best practices to improve the performance, refer below documentation:

Performance tips for EJ2 React Gantt control | Syncfusion

Try the suggested solution and check for any time delay. If you are still experiencing significant delays, please provide the following details:

1. Your data source.
2. The complete templates used for columns, taskbars, and headers.
3. Any CSS customizations applied.

Or else replicate the issue with the below sample and revert us back for further validation.

Sample - https://stackblitz.com/edit/react-vspahdeu-g7ucmyxk?file=index.js