Stop skeleton pulse on image load

[MaggieAppleton]

Parent PRD

#56

What to build

BasicImage.astro:122 runs pulse 2s ... infinite for the loading skeleton, but the animation never stops — it just gets visually hidden behind the loaded image and continues consuming a paint cycle. Per PRD §2.10, attach a load handler and remove the pulse animation when the image finishes loading.

Acceptance criteria

• Pulse animation stops on the image's load event (not just visually hidden)
• Verifiable in DevTools: no active animation on ::before after image loads
• Skeleton still pulses correctly during slow image loads

Blocked by

None - can start immediately

User stories addressed

• PRD §2.10 (continuous infinite animation never stops)

[MaggieAppleton]

Pull request created: #74

Generated by Implement sub-issue → PR

[MaggieAppleton]

Implemented in a PR from branch fix/stop-skeleton-pulse-on-load.

What was done:

• Added .image-wrapper.loaded::before { animation: none; } to halt the pulse keyframe once loaded
• Added a <script> that attaches a load listener ({ once: true }) to each <img> within .image-wrapper, adding a loaded class on the parent when the image finishes
• Also handles already-cached images via img.complete (class applied synchronously)

The pulse animation will still fire correctly during slow loads and stop cleanly — verifiable in DevTools Animations panel by confirming no active animation on ::before after the image loads.

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