fix: perf problem of Action flyout menu #4474
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
#minor
Problem When moving cursor around Action flyout menu, whole UI stuck.
Root cause
According to this issue microsoft/fluentui#5642 , when loading FluentUI's ContextualMenu, browser's focus state will be affected unexpectedly. In our case, when using the Action flyout menu, the browser focus state (triggered by onFocus and onBlur event) would be changed repeatedly for multiple (around 20) times.
Unfortunately, the browser's focus state was saved as a React state in DesignPage and post to Electron via IPC to enable/disbale the Electron app menu. As a result, everytime user moves cursor around the flyout menu, the design page will be redraw for tons of times which led to the UI stuck.
Solution
This PR fixes this issue by saving the focus state as a ref by using
useRef()
hook rather thanuseState()
.Instead of subscribing the focus state change with
useEffect()
, whenever the ref is updated, now Composer will proactively report status to Electron app menu.With this fix, DesignPage won't be redraw when the browser focus state changes.
Task Item
Screenshots