Skip to content

[Files] Fix image intersection observer behavior#143843

Merged
jloleysens merged 8 commits intoelastic:mainfrom
jloleysens:fix-image-intersection-observer
Oct 25, 2022
Merged

[Files] Fix image intersection observer behavior#143843
jloleysens merged 8 commits intoelastic:mainfrom
jloleysens:fix-image-intersection-observer

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

💚 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 PR 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 PR 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