Skip to content

[Shared UX] No data image placeholders#132376

Merged
cchaos merged 3 commits intoelastic:mainfrom
cchaos:no_data/image_placeholders
May 18, 2022
Merged

[Shared UX] No data image placeholders#132376
cchaos merged 3 commits intoelastic:mainfrom
cchaos:no_data/image_placeholders

Conversation

@cchaos
Copy link
Contributor

@cchaos cchaos commented May 17, 2022

While reviewing #132272 I noticed that the images we use in the no data cards and the no data views prompt don't have dimensions while the page is being loaded. This causes shifts in layout once the image is loaded. This PR gives these image components dimensions / dimensional fallbacks so that they don't cause these layout shifts.

BEFORE

CleanShot.2022-05-17.at.18.05.53.mp4
CleanShot.2022-05-17.at.18.11.05.mp4

AFTER

CleanShot.2022-05-17.at.18.02.50.mp4
CleanShot.2022-05-17.at.18.08.55.mp4

Checklist

@cchaos cchaos added Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v8.3.0 labels May 17, 2022
@cchaos cchaos requested a review from a team May 17, 2022 22:13
@cchaos cchaos added the release_note:skip Skip the PR/issue when compiling release notes label May 17, 2022
width: `max(100%, 360px)`,
height: 240,
objectFit: `cover`,
background: `aliceblue`,
Copy link
Contributor

Choose a reason for hiding this comment

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

Just a nit: I don't think you need backticks here, regular '' should work.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, usually my IDE converts these on save, wonder why it didnt. Fixed 2a33179

Copy link
Contributor

@majagrubic majagrubic left a comment

Choose a reason for hiding this comment

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

Code review only, haven't tested it, but the changes look pretty straightforward and align with the video description.

@cchaos cchaos enabled auto-merge (squash) May 18, 2022 11:52
@kibana-ci
Copy link

💚 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
dataViewEditor 171.9KB 172.1KB +197.0B
discover 529.9KB 530.1KB +197.0B
lens 1.2MB 1.2MB +197.0B
securitySolution 5.0MB 5.0MB +197.0B
total +788.0B

Page load bundle

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

id before after diff
kibanaReact 59.5KB 59.6KB +153.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@cchaos cchaos merged commit d828e9b into elastic:main May 18, 2022
@kibanamachine kibanamachine added the backport:skip This PR does not require backporting label May 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v8.3.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants