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

Fix layout jumps for images #6474

Merged
merged 1 commit into from
Nov 18, 2024
Merged

Fix layout jumps for images #6474

merged 1 commit into from
Nov 18, 2024

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon commented Nov 17, 2024

I've noticed the aspectRatio value here fluctuates between user-submitted measurement vs measurement on fetch. The fluctuation is small but this leads to an extra setState and potentially to tiny layout jumps. And if the aspect ratio was not specified at all, the layout jump can be significant — per each such image.

Screenshot 2024-11-17 at 22 58 01

We should never layout jump in feed. So let's either use the provided aspect, or assume it's a square.

Also lets us avoid a setState.

Test Plan

Verify images show up appropriately sized, as before (try tall, wide, square images).

Comment out the = image.aspectRatio part and verify that missing measurements are handled gracefully.

Verify lightbox works in all cases.

@arcalinea arcalinea temporarily deployed to fix-layout-jump-img - social-app PR #6474 November 17, 2024 23:28 — with Render Destroyed
Copy link

Old size New size Diff
8.05 MB 8.05 MB -54 B (-0.00%)

Copy link
Member

@mozzius mozzius left a comment

Choose a reason for hiding this comment

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

code lgtm, though we should let Paul know we're doing this since it's a breaking change for how images work

@gaearon
Copy link
Collaborator Author

gaearon commented Nov 18, 2024

gave heads up to Paul, he's cool

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants