Feat(web): Introduce Skeleton component #DS-1625

[katerinarehorkova]

Description

• New component Skeleton
• only web package implementation

Additional context

Issue reference

https://jira.almacareer.tech/browse/DS-1625

[netlify]

✅ Deploy Preview for spirit-design-system-storybook canceled.

Name	Link
🔨 Latest commit	3dc28c0
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/67a0c1606363b20008fd3a8b

[netlify]

✅ Deploy Preview for spirit-design-system ready!

Name	Link
🔨 Latest commit	3dc28c0
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system/deploys/67a0c160e092970008c87568
😎 Deploy Preview	https://deploy-preview-1863--spirit-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (no change from production) Accessibility: 91 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

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

[literat]

👏 Great, nice first PR and contribution to the Spirit Design System 🎉

When I switch the demo to the "Light on brand" theme, the animation and color are missing. I think that this should be the same as the default. But not sure. @crishpeen

[literat]

Good Job. LGTM 👍 Please wait for the merge after approval by @crishpeen or @adamkudrna. Thanks.

[crishpeen]

Thank you for your work, I am sorry I have a lot of comments, especially because a lot of them is something which might be opinionated.

Sometimes I just raised a question where I am not sure about something.

Please also add a visual screenshot when the PR is ready again (there will actually be two - new web HP and the acutal Skeleton). Thank you very much and feel free to ask for more explanation if I am not clear somewhere!

[literat]

It is looking good with the new tokens. Great work. I have only one question regarding the animation: Can it be more smooth, please? Now it looks like there is a little jump or hiccup between the end and the start of the loop.

I am not sure if this is understandable but if I compare the animation with the https://design-system.seduo.com/docs/components/skeleton, the animation starts and ends in the same position, e.g. no gradient is displayed. But in our case, we are starting with a displayed gradient at the start of the Skeleton and we end the ease with the displayed gradient at the end. So when the loop restarts there is a little "hiccup" in the animation.

🔝 @crishpeen But if we have agreed on this, maybe it is fine 🤷