[ai] Stop skeleton pulse animation on image load

[MaggieAppleton]

Implements

Closes #69

Parent plan

#56

What changed

• Added .image-wrapper.loaded::before { animation: none; } CSS rule to halt the pulse keyframe when the image is done loading
• Added a <script> block that queries all .image-wrapper elements on the page and attaches a load listener to each contained <img>
• The listener adds the loaded class (removing the animation) and fires with { once: true } so it auto-cleans up
• Handles already-cached images via img.complete — the class is applied synchronously if the image is already decoded

How to verify

1. Open any essay page with <BasicImage> components
2. In DevTools → Performance (or Animations panel), confirm no active pulse animation on .image-wrapper::before after the image has loaded
3. Throttle the network to Slow 3G, reload — the skeleton should visibly pulse while the image is loading, then stop once the load event fires

Notes

• Pseudo-elements can't be targeted by JS directly; toggling a class on the parent wrapper is the standard pattern
• The { once: true } option means the event listener removes itself after firing — no cleanup needed
• Astro bundles <script> blocks globally; querySelectorAll handles all instances of the component on a single page

Generated by Implement sub-issue → PR for issue #69 · ● 98.8K · ◷

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
maggieappleton-com-v3	Ignored		Apr 26, 2026 7:29pm