Virtual scrolling is unusable

[HP]

Hi,

When we try to load the Gantt Chart control with more than around 100 rows, the loading time becomes unacceptably long (around 8 seconds) (also the Gantt lags a bit after it has been loaded, when there are 100+ rows). The guidance that you provide for this, is to enable virtual scrolling.

The issue with virtual scrolling though is that every time the user scrolls even a tiny amount, the user needs to wait about a second for the contents to load. This makes it very hard for users to navigate and find items, as the contents keep disappearing and re-appearing. In other modern applications, the loading time is much less and scrolling is much less jarring to the user.

You can just look at the example that you provide at https://ej2.syncfusion.com/react/documentation/gantt/virtual-scroll#row-virtualization. Even scrolling down a single row, and up a single row, will make the user lose focus, as the contents disappear for a second then re-appear. 

Is there some way to improve the performance of the Gantt chart? For example, once the rows are loaded, don't throw them away, when the user scroll away. And/or pre-fetch more rows outside of what the user sees. At the moment, it's hard to use the Syncfusion Gantt chart for any non-trivial amounts of data.

Thanks

[Sridharan Jayabalan]

Hi HP,

Greetings from Syncfusion.

We understand the issue you're facing with virtualization in the Gantt Chart, and specifically the need for a buffer count feature. As you noted, during small scroll movements, the shimmer effect can cause a noticeable delay while both scrolling up and down.

To address this, we've already logged a feature request to support buffer count in virtualization. You can track the progress of this feature through the feedback link provided below:

Feedback - Need to provide support for buffer count in virtualization in React | Feedback Portal (syncfusion.com)

 

However, please note that since we have some major features currently in development, we won't be able to implement this feature immediately. We recommend casting your vote on the feature, as this helps us prioritize it based on customer demand. You can communicate with us or track the status using the feedback portal.

Current Workaround:

In the meantime, you can use the enableVirtualMaskRow property, which allows you to render a spinner instead of the shimmer effect. This may provide a more stable user experience for now.

Limitation:

Occasionally, synchronization between the Gantt Grid and Chart may not occur properly during scrolling. However, the sync will correct itself once scrolling stops.

Sample - Mndcpg (forked) - StackBlitz

If you need further assistance, feel free to reach out.

 

Regards,

Sridharan