Skip to content

[Lens][Embeddable] Make UI react faster to click actions like create or edit#210810

Merged
dej611 merged 10 commits intoelastic:mainfrom
dej611:fix/209361-3
Feb 20, 2025
Merged

[Lens][Embeddable] Make UI react faster to click actions like create or edit#210810
dej611 merged 10 commits intoelastic:mainfrom
dej611:fix/209361-3

Conversation

@dej611
Copy link
Copy Markdown
Contributor

@dej611 dej611 commented Feb 12, 2025

Summary

This PR is based on the idea in #209361 and tries to improve perceived performances for all the scenarios where the editorFrame is loaded.

On fast connections this is now perceived very fast:
esql_fast

On Fast 4g is still fast
esql_fast_4g

On Slow 4g is acceptable

esql_slow_4g

Even on 3G connection the feedback is much better now

esql_3g

As a bonus extra tests have been added for the ES|QL creation flow.

cc @thomasneirynck @nreese

Checklist

@dej611
Copy link
Copy Markdown
Contributor Author

dej611 commented Feb 12, 2025

/ci

@dej611 dej611 added Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// release_note:skip Skip the PR/issue when compiling release notes Feature:Lens backport:prev-major labels Feb 12, 2025
@dej611 dej611 self-assigned this Feb 12, 2025
@dej611
Copy link
Copy Markdown
Contributor Author

dej611 commented Feb 12, 2025

/ci

@dej611
Copy link
Copy Markdown
Contributor Author

dej611 commented Feb 12, 2025

/ci

@dej611
Copy link
Copy Markdown
Contributor Author

dej611 commented Feb 12, 2025

/ci

@dej611 dej611 marked this pull request as ready for review February 14, 2025 09:39
@dej611 dej611 requested review from a team as code owners February 14, 2025 09:39
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/kibana-visualizations (Team:Visualizations)

Copy link
Copy Markdown
Contributor

@jbudz jbudz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

packages/kbn-optimizer/limits.yml LGTM

Copy link
Copy Markdown
Contributor

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM, tested locally and it's much snappier!

dej611 and others added 2 commits February 19, 2025 17:02
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
lens 1.6MB 1.6MB -9.7KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
lens 49.0KB 58.6KB +9.7KB

History

cc @dej611

@dej611 dej611 added backport:version Backport to applied version labels v9.1.0 and removed backport:prev-major labels Feb 20, 2025
@dej611 dej611 added the v8.19.0 label Feb 20, 2025
@dej611 dej611 merged commit 1e92ae8 into elastic:main Feb 20, 2025
16 checks passed
@kibanamachine
Copy link
Copy Markdown
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/13440977640

@kibanamachine
Copy link
Copy Markdown
Contributor

💔 All backports failed

Status Branch Result
8.x Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 210810

Questions ?

Please refer to the Backport tool documentation

@dej611
Copy link
Copy Markdown
Contributor Author

dej611 commented Feb 21, 2025

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

@kibanamachine kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Feb 24, 2025
@kibanamachine
Copy link
Copy Markdown
Contributor

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

4 similar comments
@kibanamachine
Copy link
Copy Markdown
Contributor

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

@kibanamachine
Copy link
Copy Markdown
Contributor

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

@kibanamachine
Copy link
Copy Markdown
Contributor

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

@kibanamachine
Copy link
Copy Markdown
Contributor

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

dej611 added a commit that referenced this pull request Mar 3, 2025
…reate or edit (#210810) (#212052)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens][Embeddable] Make UI react faster to click actions like create
or edit (#210810)](#210810)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Marco
Liberati","email":"dej611@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-20T17:19:46Z","message":"[Lens][Embeddable]
Make UI react faster to click actions like create or edit
(#210810)\n\n## Summary\n\nThis PR is based on the idea in #209361 and
tries to improve perceived\nperformances for all the scenarios where the
`editorFrame` is loaded.\n\nOn fast connections this is now perceived
very
fast:\n\n![esql_fast](https://github.com/user-attachments/assets/efb26416-bf15-449e-912f-a689c689c593)\n\nOn
Fast 4g is still
fast\n\n![esql_fast_4g](https://github.com/user-attachments/assets/acc199be-683d-4a4b-a53c-f37a9117c258)\n\nOn
Slow 4g is
acceptable\n\n\n![esql_slow_4g](https://github.com/user-attachments/assets/6fed9ec4-dc3f-4557-976c-91d82bddc10f)\n\nEven
on 3G connection the feedback is much better
now\n\n\n![esql_3g](https://github.com/user-attachments/assets/27e96c01-9149-4dd1-8a6d-e005202149ff)\n\nAs
a bonus extra tests have been added for the ES|QL creation flow.\n\ncc
@thomasneirynck @nreese \n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: Nick Partridge
<nick.ryan.partridge@gmail.com>","sha":"1e92ae8afbec96f437040a7d3147b20e52478833","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Team:Visualizations","release_note:skip","Feature:Lens","backport:version","v9.1.0","v8.19.0"],"title":"[Lens][Embeddable]
Make UI react faster to click actions like create or
edit","number":210810,"url":"https://github.com/elastic/kibana/pull/210810","mergeCommit":{"message":"[Lens][Embeddable]
Make UI react faster to click actions like create or edit
(#210810)\n\n## Summary\n\nThis PR is based on the idea in #209361 and
tries to improve perceived\nperformances for all the scenarios where the
`editorFrame` is loaded.\n\nOn fast connections this is now perceived
very
fast:\n\n![esql_fast](https://github.com/user-attachments/assets/efb26416-bf15-449e-912f-a689c689c593)\n\nOn
Fast 4g is still
fast\n\n![esql_fast_4g](https://github.com/user-attachments/assets/acc199be-683d-4a4b-a53c-f37a9117c258)\n\nOn
Slow 4g is
acceptable\n\n\n![esql_slow_4g](https://github.com/user-attachments/assets/6fed9ec4-dc3f-4557-976c-91d82bddc10f)\n\nEven
on 3G connection the feedback is much better
now\n\n\n![esql_3g](https://github.com/user-attachments/assets/27e96c01-9149-4dd1-8a6d-e005202149ff)\n\nAs
a bonus extra tests have been added for the ES|QL creation flow.\n\ncc
@thomasneirynck @nreese \n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: Nick Partridge
<nick.ryan.partridge@gmail.com>","sha":"1e92ae8afbec96f437040a7d3147b20e52478833"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210810","number":210810,"mergeCommit":{"message":"[Lens][Embeddable]
Make UI react faster to click actions like create or edit
(#210810)\n\n## Summary\n\nThis PR is based on the idea in #209361 and
tries to improve perceived\nperformances for all the scenarios where the
`editorFrame` is loaded.\n\nOn fast connections this is now perceived
very
fast:\n\n![esql_fast](https://github.com/user-attachments/assets/efb26416-bf15-449e-912f-a689c689c593)\n\nOn
Fast 4g is still
fast\n\n![esql_fast_4g](https://github.com/user-attachments/assets/acc199be-683d-4a4b-a53c-f37a9117c258)\n\nOn
Slow 4g is
acceptable\n\n\n![esql_slow_4g](https://github.com/user-attachments/assets/6fed9ec4-dc3f-4557-976c-91d82bddc10f)\n\nEven
on 3G connection the feedback is much better
now\n\n\n![esql_3g](https://github.com/user-attachments/assets/27e96c01-9149-4dd1-8a6d-e005202149ff)\n\nAs
a bonus extra tests have been added for the ES|QL creation flow.\n\ncc
@thomasneirynck @nreese \n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: Nick Partridge
<nick.ryan.partridge@gmail.com>","sha":"1e92ae8afbec96f437040a7d3147b20e52478833"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
@kibanamachine kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 3, 2025
SoniaSanzV pushed a commit to SoniaSanzV/kibana that referenced this pull request Mar 4, 2025
…reate or edit (elastic#210810) (elastic#212052)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens][Embeddable] Make UI react faster to click actions like create
or edit (elastic#210810)](elastic#210810)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Marco
Liberati","email":"dej611@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-20T17:19:46Z","message":"[Lens][Embeddable]
Make UI react faster to click actions like create or edit
(elastic#210810)\n\n## Summary\n\nThis PR is based on the idea in elastic#209361 and
tries to improve perceived\nperformances for all the scenarios where the
`editorFrame` is loaded.\n\nOn fast connections this is now perceived
very
fast:\n\n![esql_fast](https://github.com/user-attachments/assets/efb26416-bf15-449e-912f-a689c689c593)\n\nOn
Fast 4g is still
fast\n\n![esql_fast_4g](https://github.com/user-attachments/assets/acc199be-683d-4a4b-a53c-f37a9117c258)\n\nOn
Slow 4g is
acceptable\n\n\n![esql_slow_4g](https://github.com/user-attachments/assets/6fed9ec4-dc3f-4557-976c-91d82bddc10f)\n\nEven
on 3G connection the feedback is much better
now\n\n\n![esql_3g](https://github.com/user-attachments/assets/27e96c01-9149-4dd1-8a6d-e005202149ff)\n\nAs
a bonus extra tests have been added for the ES|QL creation flow.\n\ncc
@thomasneirynck @nreese \n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: Nick Partridge
<nick.ryan.partridge@gmail.com>","sha":"1e92ae8afbec96f437040a7d3147b20e52478833","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Team:Visualizations","release_note:skip","Feature:Lens","backport:version","v9.1.0","v8.19.0"],"title":"[Lens][Embeddable]
Make UI react faster to click actions like create or
edit","number":210810,"url":"https://github.com/elastic/kibana/pull/210810","mergeCommit":{"message":"[Lens][Embeddable]
Make UI react faster to click actions like create or edit
(elastic#210810)\n\n## Summary\n\nThis PR is based on the idea in elastic#209361 and
tries to improve perceived\nperformances for all the scenarios where the
`editorFrame` is loaded.\n\nOn fast connections this is now perceived
very
fast:\n\n![esql_fast](https://github.com/user-attachments/assets/efb26416-bf15-449e-912f-a689c689c593)\n\nOn
Fast 4g is still
fast\n\n![esql_fast_4g](https://github.com/user-attachments/assets/acc199be-683d-4a4b-a53c-f37a9117c258)\n\nOn
Slow 4g is
acceptable\n\n\n![esql_slow_4g](https://github.com/user-attachments/assets/6fed9ec4-dc3f-4557-976c-91d82bddc10f)\n\nEven
on 3G connection the feedback is much better
now\n\n\n![esql_3g](https://github.com/user-attachments/assets/27e96c01-9149-4dd1-8a6d-e005202149ff)\n\nAs
a bonus extra tests have been added for the ES|QL creation flow.\n\ncc
@thomasneirynck @nreese \n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: Nick Partridge
<nick.ryan.partridge@gmail.com>","sha":"1e92ae8afbec96f437040a7d3147b20e52478833"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210810","number":210810,"mergeCommit":{"message":"[Lens][Embeddable]
Make UI react faster to click actions like create or edit
(elastic#210810)\n\n## Summary\n\nThis PR is based on the idea in elastic#209361 and
tries to improve perceived\nperformances for all the scenarios where the
`editorFrame` is loaded.\n\nOn fast connections this is now perceived
very
fast:\n\n![esql_fast](https://github.com/user-attachments/assets/efb26416-bf15-449e-912f-a689c689c593)\n\nOn
Fast 4g is still
fast\n\n![esql_fast_4g](https://github.com/user-attachments/assets/acc199be-683d-4a4b-a53c-f37a9117c258)\n\nOn
Slow 4g is
acceptable\n\n\n![esql_slow_4g](https://github.com/user-attachments/assets/6fed9ec4-dc3f-4557-976c-91d82bddc10f)\n\nEven
on 3G connection the feedback is much better
now\n\n\n![esql_3g](https://github.com/user-attachments/assets/27e96c01-9149-4dd1-8a6d-e005202149ff)\n\nAs
a bonus extra tests have been added for the ES|QL creation flow.\n\ncc
@thomasneirynck @nreese \n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: Nick Partridge
<nick.ryan.partridge@gmail.com>","sha":"1e92ae8afbec96f437040a7d3147b20e52478833"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Mar 22, 2025
…or edit (elastic#210810)

## Summary

This PR is based on the idea in elastic#209361 and tries to improve perceived
performances for all the scenarios where the `editorFrame` is loaded.

On fast connections this is now perceived very fast:

![esql_fast](https://github.com/user-attachments/assets/efb26416-bf15-449e-912f-a689c689c593)

On Fast 4g is still fast

![esql_fast_4g](https://github.com/user-attachments/assets/acc199be-683d-4a4b-a53c-f37a9117c258)

On Slow 4g is acceptable


![esql_slow_4g](https://github.com/user-attachments/assets/6fed9ec4-dc3f-4557-976c-91d82bddc10f)

Even on 3G connection the feedback is much better now


![esql_3g](https://github.com/user-attachments/assets/27e96c01-9149-4dd1-8a6d-e005202149ff)

As a bonus extra tests have been added for the ES|QL creation flow.

cc @thomasneirynck @nreese 

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version Backport to applied version labels Feature:Lens release_note:enhancement release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v8.19.0 v9.1.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants