Avoid calling redux actions constantly when moving the mouse or scrolling #44325
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +73 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
youknowriad
commented
Sep 21, 2022
| * | ||
| * @return {Record<string,boolean>} Block visibility. | ||
| */ | ||
| export function blockVisibility( state = {}, action ) { |
There was a problem hiding this comment.
Moving blockVisibility state of the "blocks" state means any change to "blockVisibility" won't have an impact on the undo/redo behavior.
before this a call to SET_BLOCK_VISIBILITY would force an undo state even if we were typing in the middle of a word.
draganescu
reviewed
Sep 21, 2022
draganescu
reviewed
Sep 21, 2022
youknowriad
requested review from
ntwb,
nerrad and
ajitbohra
as code owners
draganescu
approved these changes
Sep 21, 2022
There was a problem hiding this comment.
I have tested this by making some commonly large posts and seeing if there is any flicker or delay in how blocks show up. I did not notice a difference vs trunk for scrolling but I did notice a great difference in how intentful the inserter showing up feels.
Although the numbers seem the same in this PR the delay in which the inserter shows up is actually real, I found this very refreshing getting rid of the flickering inserter on scroll.
The code LGTM 
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
I've noticed that when you scroll the page or when you move the mouse on the editor canvas, there are redux actions that are constantly called, causing potential re-renders and this might slow the editor and remove the feeling of responsiveness. This PR makes sure these actions are delayed/debounced accordingly.
Why?
To improve the responsive of the editor when moving around.
How?
setBlockVisibilityaction which is responsible of the sync/async behavior of the data module is delayed and batched.showInsertionPointcall entirely to avoid re-rendering, that way when you move the mouse across blocks, the insertion point action is not triggered at all unless you stay more than 500ms between the blocks.I'm not sure we have performance metrics that show the impact here but I'm convinced this will largely improve the responsiveness when moving the mouse on large posts.
Testing Instructions
1- Test the in-between inserter
2- Try scrolling and moving the mouse around especially with large posts.