Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Files] Fix image intersection observer behavior #143843

Merged
merged 8 commits into from
Oct 25, 2022

Conversation

jloleysens
Copy link
Contributor

@jloleysens jloleysens commented Oct 24, 2022

Summary

Occasionally the observer does not fire with a "visible" event for the image tag. This happened because the img tag was placed below the blurhash and could be pushed out of view in a component with overflow hidden (as is the case in the file picker #143111). The result (see screenshot) is that the image can get "stuck" on the blurhash.

This PR makes the image tag appear "on top" of the blurhash so that when the container is scrolled into view it will render correctly.

Original context: https://github.com/elastic/kibana/pull/143111/files#r999145694

Also removes the "lazy" option from the Image component since it should, preferably, always load lazily.

How to reproduce the issue

On main

  1. Launch Kibana with --run-examples
  2. Go to the developer examples section in the side nav and open the file picker app
  3. Ensure that you have a bunch of files uploaded
  4. Click on the "Select a file" button to open the file picker
  5. Flip back and forth between pages, scrolling down.

The issue

Screenshot 2022-10-24 at 12 25 21

@jloleysens jloleysens added release_note:skip Skip the PR/issue when compiling release notes auto-backport Deprecated - use backport:version if exact versions are needed Team:AppServicesUx feature:Files v8.6.0 labels Oct 24, 2022
@jloleysens jloleysens requested a review from a team as a code owner October 24, 2022 11:01
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app-services (Team:AppServicesUx)

@jloleysens jloleysens changed the title [Files] Fix image intersection observer [Files] Fix image intersection observer behavior Oct 24, 2022
@kibana-ci
Copy link
Collaborator

💚 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
files 25.3KB 25.4KB +105.0B

Page load bundle

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

id before after diff
files 19.5KB 19.5KB -6.0B
Unknown metric groups

API count

id before after diff
files 271 270 -1

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

Copy link
Contributor

@Dosant Dosant left a comment

Choose a reason for hiding this comment

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

Tested, works well!

Example app looks nice!

@jloleysens jloleysens merged commit 37454b7 into elastic:main Oct 25, 2022
@jloleysens jloleysens deleted the fix-image-intersection-observer branch October 25, 2022 12:15
@kibanamachine kibanamachine added the backport:skip This commit does not require backporting label Oct 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto-backport Deprecated - use backport:version if exact versions are needed backport:skip This commit does not require backporting feature:Files release_note:skip Skip the PR/issue when compiling release notes v8.6.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants