feat: add skeletonDuringImageLoad prop to CardImageCap

[brian-smith-tcril]

Description

The current behavior of CardImageCap is to show the loading skeleton when the Card context's isLoading is true, but not when the image itself is loading. This leads to resizing on load. This PR adds a new skeletonDuringImageLoad prop so consumers can choose to instead continue to display the skeleton loader until the images load.

skeletonDuringImageLoad={false}

Slow network simulated

Screencast.From.2025-11-14.04-45-03.mp4

skeletonDuringImageLoad={true}

Slow network simulated

Screencast.From.2025-11-14.04-49-06.mp4

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx-v23 ready!

Name	Link
🔨 Latest commit	86ad947
🔍 Latest deploy log	https://app.netlify.com/projects/paragon-openedx-v23/deploys/6916fba5e1aa8e00085f1804
😎 Deploy Preview	https://deploy-preview-3992--paragon-openedx-v23.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.37%. Comparing base (1e12e0c) to head (86ad947).
⚠️ Report is 2 commits behind head on release-23.x.

Additional details and impacted files

@@              Coverage Diff              @@
##           release-23.x    #3992   +/-   ##
=============================================
  Coverage         94.37%   94.37%           
=============================================
  Files               242      242           
  Lines              4282     4287    +5     
  Branches           1017      979   -38     
=============================================
+ Hits               4041     4046    +5     
- Misses              233      237    +4     
+ Partials              8        4    -4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[peterkulko]

LGTM!

Your solution seems connected to a few earlier activities. I previously opened an issue about the "card flickering" problem in the Date view component (#2480). At the time, we attempted to address it by creating a custom useImageLoader hook (#2846), but I wasn’t really happy with that approach, it felt overly complex and heavy-handed.

Now, I can see that the skeletonDuringImageLoad prop is a much cleaner and simpler way to handle the card flickering issue. Besides the course catalog page in the Catalog MFE, we’ll definitely need skeletonDuringImageLoad for the Paragon documentation site as well, specifically for the MiyazakiCard. I’ve already tried adding it there, and it looks great.

Screen.Recording.2025-11-16.at.15.15.49.mov

Updated issue mentioning flickering problem: openedx/frontend-app-catalog#41

[openedx-semantic-release-bot]

🎉 This PR is included in version 23.17.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀