Page editor sidebar reacts to clicks slowly, re-rendering the whole editor

[fregante]

Left: console of the page editor Right: page editor Action: click on any extension Result: the whole editor re-renders (after a while) even if the same item was clicked

Possible improvements:

• improve reaction time
• avoid re-rendering the whole editor when one item is selecte
• avoid re-rendering anything "on click"
  • if there's some action "on click" in the sidebar, it should be moved to "on select"; Clicking on the same item should not change anything.

https://user-images.githubusercontent.com/1402241/184579544-28dba05d-26a6-4ad1-9bab-90e263d6338a.mov

[fregante]

This isn't limited to context menu items. Every item is slow in the sidebar

[fregante]

This doesn't seem to be limited to the sidebar. The same speed is encountered when moving bricks. Selecting them is faster, but not instant either.

https://user-images.githubusercontent.com/1402241/184580266-5c07a4f6-aa70-4aae-b92b-c0692ea872f5.mov

[twschiller]

Was discussing with @BLoe and @BALEHOK on Friday. The analysis engine middleware might be exacerbating the problem

Overall, this is a known problem, and will be a major goal of the Page Editor restructuring picking up the week of the 22nd

[twschiller]

@fregante by the way, I suspect some of our performance issues are starting to be because of ineffecient extension vs. background page communication (the tubes are getting clogged if there are are two many messages?). So part of the solution might end up be rewriting some of the access patterns to reduce the number of messages...

[fregante]

the tubes are getting clogged if there are are two many messages

I'd hazard to say that purely sending 14 messages shouldn't clog up the tubes and slow a click down: (screenshot of pageEditor after selecting an extension in the sidebar)

Compared to HTTP operations like:

• https://github.com/pixiebrix/pixiebrix-extension/issues/3945

and just slow fully-synchronous 0.5s React/DOM operations as shown here: (screenshot of pageEditor)

The screenshot shows the flame chart of a click on an extension in the sidebar; the operation lasts 1 second. If async operations of the messenger took a substantial amount of time, you'd see large empty blocks of non-action, but instead I see a lot of operations in the pageEditor thread.

Given the chart, I suspect this is largely a React-specific performance issue.

[fregante]

Here's a zoom on that long yellow sequence of addEventListeners, if you're wondering:

[github-actions[bot]]

This issue will be closed in 7 days unless the stale label is removed, or a comment is added to the issue.

[github-actions[bot]]

This issue was closed because it has been stale for 7 days with no activity.