Grouped ReactGantt blinking when redux renderings occur

Gantt React Gantt
#1

In my react-redux app the ReactGantt is being re-rendered each time a redux rendering occurs.
(unfortunately it’s not possible to optimise these redux renderings to the maximum (see this thread)

So in case our app displays a grouped gantt, then the gantt.groupBy() is called and it does the grouping like a charm but then once the redux state changes and the gantt component also renders (with exactly the same set of data passed to it) but once it happens it seems being all cleared before it gets filled again with tasks.

When there’s no grouping active in the gantt, it remains stable throughout these renderings and it doesn’t blink as it does when it’s grouped.

Here a screenshot showing all these steps : https://i.imgur.com/I3tBzaB.gif
1st breakpoint : just before the inital rendering (the gantt not displayed yet)
2nd : just after the initial rendering and before calling gantt.groupBy().
3sd and 4th: just after the grouping and before the re-rendering.
Last breakpoint : after the re-rendering , the gantt is cleared.

If later in the useEffect I call , then the gantt re-display its tasks but as the re-renderings occurs many times so I’m getting the blinking as shown here : https://i.imgur.com/3ctRyi2.gif.

I couldn’t make a demo in any web app such as plinker or stackblitz.com and I also couldn’t make a simple react-app which just reproduce the issue as I got these errors https://i.imgur.com/U9bEWgf.png.

#2

I finally could make a demo using the ReactGanttExample (that is under react-samples\src\examples\redux-toolkit\Demo.tsx)
Here is the demo I made in that (dropbox link).

As you can see the scroll jumps to the position top = 0 after each task editing
(Screenshot: https://i.imgur.com/u8UE7Tz.gif)

Is there a way to avoid those instability problem from happening?
I’m talking not only about the scroll instability but also the blinking which I talked about in my question.

#3

Hello Ahmed,
Thank you for letting us know about the issue. I forwarded that information to the dev team. They will investigate why it works that way and find a way to fix that.

I checked that if you group tasks after clicking on a button, the scroll position is not reset. You can check how it works in the updated demo:
https://files.dhtmlx.com/30d/2506ae7c9c69c47c04f1198999bd99dd/Demo.tsx

#4

Hello @ramil , thanks for your response.
Actually , the point is not to group at a certain moment but to keep the gantt on a grouped state through each of these redux renderings.
If the ReactGantt had any parameter that defines the grouping state and maintain it in such as situation, I wouldn’t need to call the groupBy() method each time on the useEffect react hook.
And notice that my data tasks do not have any parent property set nor any task of type “project” is added to my data set. I rely on the gantt to make the grouping itself as it has the ability to do it.

#5

Hello Ahmed,
Right now, there is no way to group tasks in React Gantt unless you use the original gantt object. But this functionality should be added in the next update.

#6

Hello @ramil
Yes I know that
But still the groupBy method could avoid destabilizing the gantt by causing the scroll jump and blinking in my scenario. I hope it will be son in next updates