Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 14 commits into
base: master
Choose a base branch
from

Conversation

khudym
Copy link
Contributor

@khudym khudym commented Nov 23, 2023

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 openedx-webhooks added the blended PR is managed through 2U's blended developmnt program label Nov 23, 2023
@openedx-webhooks
Copy link

Thanks for the pull request, @khudym!

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

Copy link

netlify bot commented Nov 23, 2023

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...

QR Code

Use your smartphone camera to open QR code link.

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

src/Card/CardImageWithSkeleton.jsx Outdated Show resolved Hide resolved
src/Card/_variables.scss Show resolved Hide resolved
src/hooks/tests/useImageLoader.test.jsx Outdated Show resolved Hide resolved
src/hooks/tests/useImageLoader.test.jsx Outdated Show resolved Hide resolved
src/hooks/tests/useImageLoader.test.jsx Outdated Show resolved Hide resolved
www/src/scss/base.scss Outdated Show resolved Hide resolved
src/hooks/useImageLoader.tsx Outdated Show resolved Hide resolved
src/hooks/useImageLoader.tsx Outdated Show resolved Hide resolved
src/hooks/tests/useImageLoader.test.jsx Outdated Show resolved Hide resolved
src/declaration.d.ts Show resolved Hide resolved
Copy link

codecov bot commented Dec 5, 2023

Codecov Report

Attention: 2 lines in your changes are missing coverage. Please review.

Comparison is base (9a96f2f) 0.00% compared to head (0f9c94c) 92.83%.
Report is 25 commits behind head on master.

Files 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.

@khudym khudym closed this Dec 7, 2023
@khudym khudym reopened this Dec 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blended PR is managed through 2U's blended developmnt program
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

None yet

3 participants