fix(ui): skeleton animation

[canerakdas]

Description

This PR aims to fix the issue where skeleton (loading) animations were not visible on the page

Validation

Before;

After;

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	May 31, 2025 1:46pm

[Copilot]

Pull Request Overview

This PR ensures skeleton loading animations are visible by inlining theme variables and adding a dark-mode animation.

• Switches the @theme directive to inline so CSS variables are actually emitted
• Adds the dark:animate-pulse-dark utility to the Skeleton component for dark-theme support

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/ui-components/styles/animations.css	Changed @theme from default to inline for inlined vars
packages/ui-components/Common/Skeleton/index.module.css	Added dark:animate-pulse-dark to the Skeleton utilities

Comments suppressed due to low confidence (2)

packages/ui-components/Common/Skeleton/index.module.css:5

• There are no tests covering the dark mode variant for the skeleton component. Consider adding a unit or visual regression test to verify that dark:animate-pulse-dark is applied correctly under dark theme.

    dark:animate-pulse-dark

packages/ui-components/Common/Skeleton/index.module.css:5

• [nitpick] Consider merging all utility classes into a single @apply statement and ensuring it ends with a semicolon, e.g., @apply outline-hidden dark:animate-pulse-dark pointer-events-none animate-pulse cursor-default; to maintain clarity and prevent potential build issues.

    dark:animate-pulse-dark

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.33%. Comparing base (3ecfbcb) to head (fe29646).
Report is 1 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7795      +/-   ##
==========================================
- Coverage   75.34%   75.33%   -0.02%     
==========================================
  Files          96       96              
  Lines        7862     7862              
  Branches      192      192              
==========================================
- Hits         5924     5923       -1     
- Misses       1937     1938       +1     
  Partials        1        1              

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

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 97	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟠 82	🔗
/en/about/previous-releases	🟢 100	🟢 100	🟢 100	🟠 83	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[ovflowd]

Let's fast track.