[BD-46] fix: show skeleton while loading src in CardImageCap (hook)

[khudym]

Description

issue with the fact that the markup jumps when loading a picture.
The CardImageCap component will display the Skeleton if Contexts isLoading=true (but this applies to the data itself), if isLoading=false, the img tag with the received data will be rendered, and the actual loading of the image will begin.

Couple solutions:

• show Skeleton not only when data isLoading, but when image is loading also; PR
• prefetch images before render; (here)

Issue#2480

Deploy Preview

deploy-preview-2846

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 add wittjeff and adamstankiewicz as reviewers on this PR.

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.

[openedx-webhooks]

Thanks for the pull request, @khudym!

When this pull request is ready, tag your edX technical lead.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	0f9c94c
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/65717b0e5a4b150008cfadbb
😎 Deploy Preview	https://deploy-preview-2846--paragon-openedx.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 site configuration.

[codecov]

Codecov Report

❌ Patch coverage is 96.29630% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.83%. Comparing base (9a96f2f) to head (0f9c94c).
⚠️ Report is 302 commits behind head on master.

Files with missing lines	Patch %	Lines
src/Card/CardImageWithSkeleton.jsx	90.00%	1 Missing ⚠️
src/hooks/useImageLoader.jsx	97.22%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           master    #2846       +/-   ##
===========================================
+ Coverage        0   92.83%   +92.83%     
===========================================
  Files           0      238      +238     
  Lines           0     4272     +4272     
  Branches        0     1033     +1033     
===========================================
+ Hits            0     3966     +3966     
- Misses          0      302      +302     
- Partials        0        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]

Closed according to #3992