[SideNav] Reduce re-renders on resize and items change #239888
Merged
Dosant merged 12 commits intoelastic:mainfrom Oct 27, 2025
Merged
[SideNav] Reduce re-renders on resize and items change #239888Dosant merged 12 commits intoelastic:mainfrom
Dosant merged 12 commits intoelastic:mainfrom
Conversation
Dosant
added
release_note:skip
Contributor
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
|
|
||
| jest.mock('../hooks/use_raf_debounced', () => | ||
| // eslint-disable-next-line @kbn/imports/no_boundary_crossing | ||
| jest.requireActual('../hooks/use_raf_debounced.mock') |
Contributor
There was a problem hiding this comment.
Good decision 👍🏻 otherwise we'd need to play around with the fake timers
Contributor
Author
There was a problem hiding this comment.
I am also hesitant about this :D
I'd not do fake timers, but just waitFor() wrappers where needed. maybe it is more transparent and reflective of real behavior
Contributor
There was a problem hiding this comment.
@Dosant we could try doing that, I'll leave it up to you
src/core/packages/chrome/navigation/src/hooks/use_responsive_menu.ts
Outdated
Show resolved
Hide resolved
src/core/packages/chrome/navigation/src/hooks/use_responsive_menu.ts
Outdated
Show resolved
Hide resolved
elastic-vault-github-plugin-prod
bot
requested a review
from a team
as a code owner
src/core/packages/chrome/navigation/src/hooks/use_responsive_menu.ts
Outdated
Show resolved
Hide resolved
adcoelho
approved these changes
Oct 27, 2025
…om:Dosant/kibana into d/2025-10-21-nav-resize-render-improvement
Dosant
added
release_note:fix
and removed
release_note:skip
weronikaolejniczak
approved these changes
Oct 27, 2025
This was referenced Oct 27, 2025
Contributor
|
Starting backport for target branches: 9.2 |
Contributor
💛 Build succeeded, but was flaky
Failed CI Steps
Test Failures
Metrics [docs]Module Count
Async chunks
History
|
kibanamachine
added a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 27, 2025
## Summary Resolves elastic#239331 I noticed that when nav present the window resizing becomes sluggish. This was caused by height recalcs in resize observable. it is especially noticeable on 4x slowdown. Re-renders before (see just number of renders around the nav) https://github.com/user-attachments/assets/4bf99d8d-eeca-4a5b-8e3f-578b20c0e4e3 Re-renders after (see just number of renders around the nav) https://github.com/user-attachments/assets/db68007b-792e-499c-bcb0-259a3cd433c9 --------- Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 29b3a5d)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Oct 27, 2025
#240884) # Backport This will backport the following commits from `main` to `9.2`: - [[SideNav] Reduce re-renders on resize and items change (#239888)](#239888) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Anton Dosov","email":"anton.dosov@elastic.co"},"sourceCommit":{"committedDate":"2025-10-27T18:10:49Z","message":"[SideNav] Reduce re-renders on resize and items change (#239888)\n\n## Summary\n\nResolves https://github.com/elastic/kibana/issues/239331\n\nI noticed that when nav present the window resizing becomes sluggish.\nThis was caused by height recalcs in resize observable. it is especially\nnoticeable on 4x slowdown.\n\nRe-renders before (see just number of renders around the nav)\n\n\nhttps://github.com/user-attachments/assets/4bf99d8d-eeca-4a5b-8e3f-578b20c0e4e3\n\nRe-renders after (see just number of renders around the nav)\n\n\nhttps://github.com/user-attachments/assets/db68007b-792e-499c-bcb0-259a3cd433c9\n\n---------\n\nCo-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"29b3a5d8fb82723ab94b5d85f5c248808e737be4","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:SharedUX","backport:version","v9.2.0","v9.3.0"],"title":"[SideNav] Reduce re-renders on resize and items change ","number":239888,"url":"https://github.com/elastic/kibana/pull/239888","mergeCommit":{"message":"[SideNav] Reduce re-renders on resize and items change (#239888)\n\n## Summary\n\nResolves https://github.com/elastic/kibana/issues/239331\n\nI noticed that when nav present the window resizing becomes sluggish.\nThis was caused by height recalcs in resize observable. it is especially\nnoticeable on 4x slowdown.\n\nRe-renders before (see just number of renders around the nav)\n\n\nhttps://github.com/user-attachments/assets/4bf99d8d-eeca-4a5b-8e3f-578b20c0e4e3\n\nRe-renders after (see just number of renders around the nav)\n\n\nhttps://github.com/user-attachments/assets/db68007b-792e-499c-bcb0-259a3cd433c9\n\n---------\n\nCo-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"29b3a5d8fb82723ab94b5d85f5c248808e737be4"}},"sourceBranch":"main","suggestedTargetBranches":["9.2"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/239888","number":239888,"mergeCommit":{"message":"[SideNav] Reduce re-renders on resize and items change (#239888)\n\n## Summary\n\nResolves https://github.com/elastic/kibana/issues/239331\n\nI noticed that when nav present the window resizing becomes sluggish.\nThis was caused by height recalcs in resize observable. it is especially\nnoticeable on 4x slowdown.\n\nRe-renders before (see just number of renders around the nav)\n\n\nhttps://github.com/user-attachments/assets/4bf99d8d-eeca-4a5b-8e3f-578b20c0e4e3\n\nRe-renders after (see just number of renders around the nav)\n\n\nhttps://github.com/user-attachments/assets/db68007b-792e-499c-bcb0-259a3cd433c9\n\n---------\n\nCo-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"29b3a5d8fb82723ab94b5d85f5c248808e737be4"}}]}] BACKPORT--> Co-authored-by: Anton Dosov <anton.dosov@elastic.co> Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>
qn895
pushed a commit
to qn895/kibana
that referenced
this pull request
Oct 28, 2025
## Summary Resolves elastic#239331 I noticed that when nav present the window resizing becomes sluggish. This was caused by height recalcs in resize observable. it is especially noticeable on 4x slowdown. Re-renders before (see just number of renders around the nav) https://github.com/user-attachments/assets/4bf99d8d-eeca-4a5b-8e3f-578b20c0e4e3 Re-renders after (see just number of renders around the nav) https://github.com/user-attachments/assets/db68007b-792e-499c-bcb0-259a3cd433c9 --------- Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
1 task
gergoabraham
added a commit
that referenced
this pull request
Nov 10, 2025
## Summary Unskipping 2 endpoint exceptions related cypress tests, as they were failing due to a UI flakiness, which should have been fixed since (#239888 and #239721). Flaky runner: ✅ 100% (25/25) for both tests on both ESS and serverless: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/9786/steps/canvas <img width="735" height="210" alt="image" src="https://github.com/user-attachments/assets/e3ad3645-8872-48d5-98a5-8d2e11e679ce" /> > [!warning] > Undo temporary commit before merge: 7e47cb1 -> done ✅ ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed
robester0403
pushed a commit
to robester0403/kibana
that referenced
this pull request
Nov 10, 2025
…242413) ## Summary Unskipping 2 endpoint exceptions related cypress tests, as they were failing due to a UI flakiness, which should have been fixed since (elastic#239888 and elastic#239721). Flaky runner: ✅ 100% (25/25) for both tests on both ESS and serverless: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/9786/steps/canvas <img width="735" height="210" alt="image" src="https://github.com/user-attachments/assets/e3ad3645-8872-48d5-98a5-8d2e11e679ce" /> > [!warning] > Undo temporary commit before merge: 7e47cb1 -> done ✅ ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed
eokoneyo
pushed a commit
to eokoneyo/kibana
that referenced
this pull request
Dec 2, 2025
…242413) ## Summary Unskipping 2 endpoint exceptions related cypress tests, as they were failing due to a UI flakiness, which should have been fixed since (elastic#239888 and elastic#239721). Flaky runner: ✅ 100% (25/25) for both tests on both ESS and serverless: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/9786/steps/canvas <img width="735" height="210" alt="image" src="https://github.com/user-attachments/assets/e3ad3645-8872-48d5-98a5-8d2e11e679ce" /> > [!warning] > Undo temporary commit before merge: 7e47cb1 -> done ✅ ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
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.
Summary
Resolves #239331
I noticed that when nav present the window resizing becomes sluggish. This was caused by height recalcs in resize observable. it is especially noticeable on 4x slowdown.
Re-renders before (see just number of renders around the nav)
before.mov
Re-renders after (see just number of renders around the nav)
after.mov