Toolpad shows 2 unsaved changes when adding a component

[Janpot]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When adding a component in the canvas, 2 changes are recorded.

Screen.Recording.2022-08-12.at.08.48.19.mov

Expected behavior 🤔

This used to be just one change, why is the dom now updating twice?

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

No response

[apedroferreira]

I think this happens when I change one or multiple elements' columnSize layout prop for the horizontal resizing - in some scenarios these values have to be updated to readjust, sometimes for several elements.
From what I remember it wasn't easy to make things work without having to update that property for some elements in some cases, but I can take another look and see if it's possible.
The main reason that it works like this is because if there's 3 elements/columns in a row for example, the total sum of the columnSize prop of each element is 3, but if there's 4 elements it's 4, etc... And when a new element is added to a row, it needs to have a default columnSize, which for this system is always 1.

Edit: this might not be 100% correct, and I'm also normalizing column sizes which might not be a necessary thing, so anyway I'll take a look and think if I can avoid unnecessary updates.

[Janpot]

I just added this ticket because it's another one of those things that will definitely make a bad UX if we should implement a naive undo/redo implementation

[apedroferreira]

sounds good, i edited my comment a bit because this might be improvable, will just have to take a look with reducing the number of updates in mind

[prakhargupta1]

From the UX perspective, we can skip showing the count of unsaved changes and rather show a visual saying (on hover) 'All changes saved successfully'.

[apedroferreira]

Created this issue to fix the larger issue with number of updates #845
For this issue will only fix the issue in the UI - by not showing the count of DOM updates but probably logging to the console in dev, or a similar solution.