Skip to content

fix(astro-memes): eliminate layout shift on image load#7714

Merged
h0lybyte merged 2 commits intodevfrom
trunk/meme-layout-shift-1772849888
Mar 7, 2026
Merged

fix(astro-memes): eliminate layout shift on image load#7714
h0lybyte merged 2 commits intodevfrom
trunk/meme-layout-shift-1772849888

Conversation

@h0lybyte
Copy link
Member

@h0lybyte h0lybyte commented Mar 7, 2026

Summary

  • BentoMemeCard: Shimmer overlay now fades out via spring animation instead of being conditionally removed (prevents flash). Trail + hover transforms are properly merged to prevent override conflict.
  • MemeCard (mobile): Uses aspect-ratio container from the meme's known width/height so layout is stable before the image loads. Added shimmer overlay matching desktop behavior.
  • Placeholder images: Replaced picsum.photos with Unsplash, added 3 more entries (8 total) for better bento grid coverage.

Closes #7548 (image collection + layout stability)

Test plan

  • Desktop bento grid: no layout shift when images load (cards stay fixed size)
  • Mobile scroll-snap feed: no layout shift — card container sized from aspect ratio before image arrives
  • Shimmer placeholder visible while images load, fades out smoothly
  • Placeholder memes display Unsplash images correctly
  • Hover effects on desktop still work (scale + shadow)

…ceholders

BentoMemeCard: replace conditional shimmer removal with spring-animated
fade-out, merge trail and hover transforms to prevent override conflict.
MemeCard: use aspect-ratio container from known width/height so the
layout is stable before the image loads, add shimmer overlay.
Placeholder images: replace picsum.photos with Unsplash, add 3 more
entries for better bento grid coverage.
@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2026

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

Revert placeholder memes back to picsum.photos (Unsplash images were
intended for the hero section). Add two new Unsplash IDs to the hero
dither cycle rotation.
@h0lybyte h0lybyte merged commit 72f331d into dev Mar 7, 2026
5 checks passed
@h0lybyte h0lybyte deleted the trunk/meme-layout-shift-1772849888 branch March 7, 2026 04:25
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.

1 participant