mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
# Backport This will backport the following commits from `main` to `7.17`: - [Prevent layout shifts after UnifiedSearch loads async (#215733)](https://github.com/elastic/kibana/pull/215733) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alberto Blázquez","email":"albertoblaz@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-03-25T21:07:06Z","message":"Prevent layout shifts after UnifiedSearch loads async (#215733)\n\n## Summary\n\nPart of the solution for:\n- https://github.com/elastic/security-team/issues/12209.\n\nAdjusts UnifiedSearch's Fallback (used by React Suspense while module is\nloading) height to be equal to the final UI rendered to prevent layout\nshifts when a page opens and renders it.\n\n### Motivation\n\nThe `UnifiedSearch` module is used across all Kibana. It renders a\n`<Fallback>` component with React Suspense while the whole module is\nloading async. Once loaded, React swaps `<Fallback>` with the loaded UI.\nThe problem is their sizes are different, and thus, it gives the\nimpression of a jumpy UI with perceived low performance.\n\nThe consequence of layout shifts is browsers need to perform a new\nrendering cycle, affecting performance negatively:\n1. **Layout**. This means they need to calculate again the exact\nposition and size of every visible element, an expensive operation also\nknown as \"reflow\".\n2. **Paint**. Once the layout is ready, browsers need to fill those\npixels with colors, borders, text, shadow, etc...\n3. **Composite (Layering and rendering)**. Finally, browsers put\neverything together in different layers and render them on screen.\n\n## Screenshots\n\n### Asset Inventory before the fix\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 16 03 51\"\nsrc=\"https://github.com/user-attachments/assets/ce8e9bc3-723b-4678-9079-5e605c2fe89f\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 44\"\nsrc=\"https://github.com/user-attachments/assets/6de30b38-91e7-4e0a-b2b4-db4477972842\"\n/> |\n\n### Asset Inventory after the fix\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 22\"\nsrc=\"https://github.com/user-attachments/assets/d2868766-3ca8-401b-9b79-63b2acde7c4a\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 44\"\nsrc=\"https://github.com/user-attachments/assets/6de30b38-91e7-4e0a-b2b4-db4477972842\"\n/> |\n\n### Discover after the fix\n\n> [!NOTE]\n> This only addresses the case with regular queries. If running the\nES|QL mode, there's still a layout shift caused by the Monaco editor\nrendered async within the UnifiedSearch boundaries. This is beyond the\nscope of this PR\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 11 55 29\"\nsrc=\"https://github.com/user-attachments/assets/e91fbb27-256e-40f8-ba20-8c4952ca8bc2\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 11 55 41\"\nsrc=\"https://github.com/user-attachments/assets/48453d4f-e108-42a4-ae28-9495f6b754dd\"\n/> |\n\n### Alerts and Findings after the fix\n\n> [!NOTE]\n> Alerts and Findings need a separate fix to render UnifiedSearch with\nthe page template's first render, not after\n\nAs of now, both pages render first a blank page template while they wait\nfor their data-view to load. This happens before rendering the\nUnifiedSearch fallback, which means there will still be a layout shift\nwhen they open. A separate fix is needed to prevent layout shifts there.\nHowever, if this is addressed, swapping Fallback with the Loaded\ncounterpart happens in-place as the images below:\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 06 33\"\nsrc=\"https://github.com/user-attachments/assets/ec3f6709-cc67-4828-8c9e-ee140b618bb4\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 06 20\"\nsrc=\"https://github.com/user-attachments/assets/6894e9cf-6a26-41a4-a0c1-293c7f4872a6\"\n/> |\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 07 22\"\nsrc=\"https://github.com/user-attachments/assets/f79ea420-573f-4d46-a5d9-afcc2b6ea9bb\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 07 09\"\nsrc=\"https://github.com/user-attachments/assets/d67f2368-1919-4ee9-a938-fc2ecd2d215e\"\n/> |\n\n### Edge-case: Multiple filters visible\n\n> [!NOTE]\n> Layout shifts will still happen with the filter bar visible and\nmultiple filters applied\n\nWhen the `showFilterBar` prop is `true` in UnifiedSearch and the number\nof applied filters is high enough to be broken into multiple lines, it's\nimpossible to calculate the height of the component without waiting for\nit to be loaded, rendered and then measure the DOM node's height. This\nmeans layout shifts will still happen and it's totally out of the scope\nof this PR.\n\n## More details\n\n### Checklist\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n- [ ]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin configuration key changed, check if it needs to be\nallowlisted in the cloud and added to the [docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n- [x] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n### Identify risks\n\nSuspensed `<Fallback>` component now depends on the `query` prop, which\nmight cause some re-renderings in case its value changes. However,\nperformance impact should be minimal.","sha":"451700afc3a513544154096b5e3a850b73ed8844","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["enhancement","release_note:skip","UX","v9.0.0","backport:all-open","v8.18.0","v9.1.0","v8.19.0","v8.17.5","v8.16.7"],"title":"Prevent layout shifts after UnifiedSearch loads async","number":215733,"url":"https://github.com/elastic/kibana/pull/215733","mergeCommit":{"message":"Prevent layout shifts after UnifiedSearch loads async (#215733)\n\n## Summary\n\nPart of the solution for:\n- https://github.com/elastic/security-team/issues/12209.\n\nAdjusts UnifiedSearch's Fallback (used by React Suspense while module is\nloading) height to be equal to the final UI rendered to prevent layout\nshifts when a page opens and renders it.\n\n### Motivation\n\nThe `UnifiedSearch` module is used across all Kibana. It renders a\n`<Fallback>` component with React Suspense while the whole module is\nloading async. Once loaded, React swaps `<Fallback>` with the loaded UI.\nThe problem is their sizes are different, and thus, it gives the\nimpression of a jumpy UI with perceived low performance.\n\nThe consequence of layout shifts is browsers need to perform a new\nrendering cycle, affecting performance negatively:\n1. **Layout**. This means they need to calculate again the exact\nposition and size of every visible element, an expensive operation also\nknown as \"reflow\".\n2. **Paint**. Once the layout is ready, browsers need to fill those\npixels with colors, borders, text, shadow, etc...\n3. **Composite (Layering and rendering)**. Finally, browsers put\neverything together in different layers and render them on screen.\n\n## Screenshots\n\n### Asset Inventory before the fix\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 16 03 51\"\nsrc=\"https://github.com/user-attachments/assets/ce8e9bc3-723b-4678-9079-5e605c2fe89f\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 44\"\nsrc=\"https://github.com/user-attachments/assets/6de30b38-91e7-4e0a-b2b4-db4477972842\"\n/> |\n\n### Asset Inventory after the fix\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 22\"\nsrc=\"https://github.com/user-attachments/assets/d2868766-3ca8-401b-9b79-63b2acde7c4a\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 44\"\nsrc=\"https://github.com/user-attachments/assets/6de30b38-91e7-4e0a-b2b4-db4477972842\"\n/> |\n\n### Discover after the fix\n\n> [!NOTE]\n> This only addresses the case with regular queries. If running the\nES|QL mode, there's still a layout shift caused by the Monaco editor\nrendered async within the UnifiedSearch boundaries. This is beyond the\nscope of this PR\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 11 55 29\"\nsrc=\"https://github.com/user-attachments/assets/e91fbb27-256e-40f8-ba20-8c4952ca8bc2\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 11 55 41\"\nsrc=\"https://github.com/user-attachments/assets/48453d4f-e108-42a4-ae28-9495f6b754dd\"\n/> |\n\n### Alerts and Findings after the fix\n\n> [!NOTE]\n> Alerts and Findings need a separate fix to render UnifiedSearch with\nthe page template's first render, not after\n\nAs of now, both pages render first a blank page template while they wait\nfor their data-view to load. This happens before rendering the\nUnifiedSearch fallback, which means there will still be a layout shift\nwhen they open. A separate fix is needed to prevent layout shifts there.\nHowever, if this is addressed, swapping Fallback with the Loaded\ncounterpart happens in-place as the images below:\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 06 33\"\nsrc=\"https://github.com/user-attachments/assets/ec3f6709-cc67-4828-8c9e-ee140b618bb4\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 06 20\"\nsrc=\"https://github.com/user-attachments/assets/6894e9cf-6a26-41a4-a0c1-293c7f4872a6\"\n/> |\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 07 22\"\nsrc=\"https://github.com/user-attachments/assets/f79ea420-573f-4d46-a5d9-afcc2b6ea9bb\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 07 09\"\nsrc=\"https://github.com/user-attachments/assets/d67f2368-1919-4ee9-a938-fc2ecd2d215e\"\n/> |\n\n### Edge-case: Multiple filters visible\n\n> [!NOTE]\n> Layout shifts will still happen with the filter bar visible and\nmultiple filters applied\n\nWhen the `showFilterBar` prop is `true` in UnifiedSearch and the number\nof applied filters is high enough to be broken into multiple lines, it's\nimpossible to calculate the height of the component without waiting for\nit to be loaded, rendered and then measure the DOM node's height. This\nmeans layout shifts will still happen and it's totally out of the scope\nof this PR.\n\n## More details\n\n### Checklist\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n- [ ]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin configuration key changed, check if it needs to be\nallowlisted in the cloud and added to the [docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n- [x] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n### Identify risks\n\nSuspensed `<Fallback>` component now depends on the `query` prop, which\nmight cause some re-renderings in case its value changes. However,\nperformance impact should be minimal.","sha":"451700afc3a513544154096b5e3a850b73ed8844"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/215958","number":215958,"state":"MERGED","mergeCommit":{"sha":"4c7f04c123c18b31e2fee2d29c0a277eb3b958be","message":"[9.0] Prevent layout shifts after UnifiedSearch loads async (#215733) (#215958)\n\n# Backport\n\nThis will backport the following commits from `main` to `9.0`:\n- [Prevent layout shifts after UnifiedSearch loads async\n(#215733)](https://github.com/elastic/kibana/pull/215733)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Alberto Blázquez <albertoblaz@users.noreply.github.com>"}},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/215956","number":215956,"state":"MERGED","mergeCommit":{"sha":"c88601ef175f8533351a018c1b83d537eeb289e7","message":"[8.18] Prevent layout shifts after UnifiedSearch loads async (#215733) (#215956)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.18`:\n- [Prevent layout shifts after UnifiedSearch loads async\n(#215733)](https://github.com/elastic/kibana/pull/215733)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Alberto Blázquez <albertoblaz@users.noreply.github.com>"}},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/215733","number":215733,"mergeCommit":{"message":"Prevent layout shifts after UnifiedSearch loads async (#215733)\n\n## Summary\n\nPart of the solution for:\n- https://github.com/elastic/security-team/issues/12209.\n\nAdjusts UnifiedSearch's Fallback (used by React Suspense while module is\nloading) height to be equal to the final UI rendered to prevent layout\nshifts when a page opens and renders it.\n\n### Motivation\n\nThe `UnifiedSearch` module is used across all Kibana. It renders a\n`<Fallback>` component with React Suspense while the whole module is\nloading async. Once loaded, React swaps `<Fallback>` with the loaded UI.\nThe problem is their sizes are different, and thus, it gives the\nimpression of a jumpy UI with perceived low performance.\n\nThe consequence of layout shifts is browsers need to perform a new\nrendering cycle, affecting performance negatively:\n1. **Layout**. This means they need to calculate again the exact\nposition and size of every visible element, an expensive operation also\nknown as \"reflow\".\n2. **Paint**. Once the layout is ready, browsers need to fill those\npixels with colors, borders, text, shadow, etc...\n3. **Composite (Layering and rendering)**. Finally, browsers put\neverything together in different layers and render them on screen.\n\n## Screenshots\n\n### Asset Inventory before the fix\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 16 03 51\"\nsrc=\"https://github.com/user-attachments/assets/ce8e9bc3-723b-4678-9079-5e605c2fe89f\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 44\"\nsrc=\"https://github.com/user-attachments/assets/6de30b38-91e7-4e0a-b2b4-db4477972842\"\n/> |\n\n### Asset Inventory after the fix\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 22\"\nsrc=\"https://github.com/user-attachments/assets/d2868766-3ca8-401b-9b79-63b2acde7c4a\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-24 at 14 10 44\"\nsrc=\"https://github.com/user-attachments/assets/6de30b38-91e7-4e0a-b2b4-db4477972842\"\n/> |\n\n### Discover after the fix\n\n> [!NOTE]\n> This only addresses the case with regular queries. If running the\nES|QL mode, there's still a layout shift caused by the Monaco editor\nrendered async within the UnifiedSearch boundaries. This is beyond the\nscope of this PR\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 11 55 29\"\nsrc=\"https://github.com/user-attachments/assets/e91fbb27-256e-40f8-ba20-8c4952ca8bc2\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 11 55 41\"\nsrc=\"https://github.com/user-attachments/assets/48453d4f-e108-42a4-ae28-9495f6b754dd\"\n/> |\n\n### Alerts and Findings after the fix\n\n> [!NOTE]\n> Alerts and Findings need a separate fix to render UnifiedSearch with\nthe page template's first render, not after\n\nAs of now, both pages render first a blank page template while they wait\nfor their data-view to load. This happens before rendering the\nUnifiedSearch fallback, which means there will still be a layout shift\nwhen they open. A separate fix is needed to prevent layout shifts there.\nHowever, if this is addressed, swapping Fallback with the Loaded\ncounterpart happens in-place as the images below:\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 06 33\"\nsrc=\"https://github.com/user-attachments/assets/ec3f6709-cc67-4828-8c9e-ee140b618bb4\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 06 20\"\nsrc=\"https://github.com/user-attachments/assets/6894e9cf-6a26-41a4-a0c1-293c7f4872a6\"\n/> |\n\n| State | Screenshot |\n|--------|--------|\n| Fallback | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 07 22\"\nsrc=\"https://github.com/user-attachments/assets/f79ea420-573f-4d46-a5d9-afcc2b6ea9bb\"\n/> |\n| Loaded | <img width=\"690\" alt=\"Screenshot 2025-03-25 at 12 07 09\"\nsrc=\"https://github.com/user-attachments/assets/d67f2368-1919-4ee9-a938-fc2ecd2d215e\"\n/> |\n\n### Edge-case: Multiple filters visible\n\n> [!NOTE]\n> Layout shifts will still happen with the filter bar visible and\nmultiple filters applied\n\nWhen the `showFilterBar` prop is `true` in UnifiedSearch and the number\nof applied filters is high enough to be broken into multiple lines, it's\nimpossible to calculate the height of the component without waiting for\nit to be loaded, rendered and then measure the DOM node's height. This\nmeans layout shifts will still happen and it's totally out of the scope\nof this PR.\n\n## More details\n\n### Checklist\n\n- [ ] Any text added follows [EUI's writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\nsentence case text and includes [i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n- [ ]\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas added for features that require explanation or tutorials\n- [ ] [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- [ ] If a plugin configuration key changed, check if it needs to be\nallowlisted in the cloud and added to the [docker\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n- [x] This was checked for breaking HTTP API changes, and any breaking\nchanges have been approved by the breaking-change committee. The\n`release_note:breaking` label should be applied in these situations.\n- [ ] [Flaky Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was\nused on any tests changed\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n### Identify risks\n\nSuspensed `<Fallback>` component now depends on the `query` prop, which\nmight cause some re-renderings in case its value changes. However,\nperformance impact should be minimal.","sha":"451700afc3a513544154096b5e3a850b73ed8844"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/215957","number":215957,"state":"MERGED","mergeCommit":{"sha":"2078613513d784215c46390e4afdda0b5ff7cf77","message":"[8.x] Prevent layout shifts after UnifiedSearch loads async (#215733) (#215957)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.x`:\n- [Prevent layout shifts after UnifiedSearch loads async\n(#215733)](https://github.com/elastic/kibana/pull/215733)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Alberto Blázquez <albertoblaz@users.noreply.github.com>"}},{"branch":"8.17","label":"v8.17.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/215955","number":215955,"state":"MERGED","mergeCommit":{"sha":"c5492adc34ec64c8a7eaa0685dd9efd6eb38df76","message":"[8.17] Prevent layout shifts after UnifiedSearch loads async (#215733) (#215955)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.17`:\n- [Prevent layout shifts after UnifiedSearch loads async\n(#215733)](https://github.com/elastic/kibana/pull/215733)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Alberto Blázquez <albertoblaz@users.noreply.github.com>"}},{"branch":"8.16","label":"v8.16.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/215954","number":215954,"state":"MERGED","mergeCommit":{"sha":"09ea3c5bb4853a00ec4dece1c76dbfb15c77f558","message":"[8.16] Prevent layout shifts after UnifiedSearch loads async (#215733) (#215954)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.16`:\n- [Prevent layout shifts after UnifiedSearch loads async\n(#215733)](https://github.com/elastic/kibana/pull/215733)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by: Alberto Blázquez <albertoblaz@users.noreply.github.com>"}}]}] BACKPORT-->
This commit is contained in:
Alberto Blázquez
GitHub
parent
ff151b693d
commit
1aa2c135a9
1 changed files with 18 additions and 2 deletions
|
|
@ -7,15 +7,31 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { injectI18n } from '@kbn/i18n/react';
|
||||
import { withKibana } from '../../../../kibana_react/public';
|
||||
import type { SearchBarProps } from './search_bar';
|
||||
|
||||
const Fallback = () => <div />;
|
||||
type FallbackProps = Pick<SearchBarProps, 'displayStyle'>;
|
||||
|
||||
const Fallback = ({ displayStyle }: FallbackProps) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
return (
|
||||
<div
|
||||
css={{
|
||||
minHeight: `calc(${euiTheme.size.xxl} + ${euiTheme.size.s} * 2)`, // in px
|
||||
marginBottom:
|
||||
displayStyle === 'detached'
|
||||
? euiTheme.border.width.thin // in px
|
||||
: '0px',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const LazySearchBar = React.lazy(() => import('./search_bar'));
|
||||
const WrappedSearchBar = (props: SearchBarProps) => (
|
||||
<React.Suspense fallback={<Fallback />}>
|
||||
<React.Suspense fallback={<Fallback displayStyle={props.displayStyle} />}>
|
||||
<LazySearchBar {...props} />
|
||||
</React.Suspense>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue