PLASMA-5253: add animation duration for Skeleton - #3024
Open
oki1oki wants to merge 2 commits into
Open
Conversation
📝 WalkthroughWalkthroughThe PR adds millisecond-based animation duration overrides to skeleton components and the ChangesSkeleton animation duration
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: dependency version conflict. Check your lock file or package.json. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
|
Theme Builder app deployed! https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-3024/ |
Contributor
oki1oki
marked this pull request as ready for review
August 7, 2026 08:54
oki1oki
requested review from
TitanKuzmich,
Yakutoc,
Yeti-or,
neretin-trike and
shuga2704
as code owners
August 7, 2026 08:54
github-actions
Bot
removed request for
TitanKuzmich,
Yakutoc,
Yeti-or,
neretin-trike and
shuga2704
August 7, 2026 08:54
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@packages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts`:
- Around line 28-29: Duration overrides incorrectly shadow configured animation
tokens and discard zero-valued Storybook settings. In LineSkeleton.styles.ts
lines 28-29 and 40-41, RectSkeleton.styles.ts lines 21-22 and 33-34, and
withSkeleton.styles.ts lines 11-12 and 18-19, check animation durations
explicitly against undefined and omit the CSS declaration when no override is
provided so configured tokens remain effective; in
utils/plasma-sb-utils/src/components/Skeleton/stories.tsx lines 118-124, replace
the falsy fallback with nullish coalescing so zero is preserved.
In `@utils/plasma-sb-utils/src/components/Skeleton/stories.tsx`:
- Around line 118-124: Update the animation options in the withSkeleton
configuration to preserve an explicit zero animationDuration by replacing the
truthiness fallback with nullish handling or direct propagation. Apply this
consistently in both branches of the visible conditional while retaining
undefined for absent values.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 17c2d3da-a3e6-4b7c-82f2-015fda89f788
📒 Files selected for processing (25)
packages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.styles.tspackages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.tsxpackages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.types.tspackages/plasma-new-hope/src/components/Skeleton/RectSkeleton/RectSkeleton.styles.tspackages/plasma-new-hope/src/components/Skeleton/RectSkeleton/RectSkeleton.tsxpackages/plasma-new-hope/src/components/Skeleton/RectSkeleton/RectSkeleton.types.tspackages/plasma-new-hope/src/components/Skeleton/Skeleton.template-doc.mdxpackages/plasma-new-hope/src/components/Skeleton/Skeleton.types.tspackages/plasma-new-hope/src/components/Skeleton/TextSkeleton/TextSkeleton.tsxpackages/plasma-new-hope/src/components/Skeleton/hoc/withSkeleton.styles.tspackages/plasma-new-hope/src/components/Skeleton/hoc/withSkeleton.tsxpackages/plasma-new-hope/src/components/Skeleton/hoc/withSkeleton.types.tsutils/plasma-sb-utils/src/components/Skeleton/stories.tsxwebsite/plasma-b2c-docs/docs/components/Skeleton.mdxwebsite/plasma-giga-docs/docs/components/Skeleton.mdxwebsite/plasma-web-docs/docs/components/Skeleton.mdxwebsite/sdds-bizcom-docs/docs/components/Skeleton.mdxwebsite/sdds-cs-docs/docs/components/Skeleton.mdxwebsite/sdds-dfa-docs/docs/components/Skeleton.mdxwebsite/sdds-finai-docs/docs/components/Skeleton.mdxwebsite/sdds-insol-docs/docs/components/Skeleton.mdxwebsite/sdds-netology-docs/docs/components/Skeleton.mdxwebsite/sdds-platform-ai-docs/docs/components/Skeleton.mdxwebsite/sdds-sbcom-docs/docs/components/Skeleton.mdxwebsite/sdds-serv-docs/docs/components/Skeleton.mdx
Comment on lines
+28
to
+29
| ${tokens.shimmerDuration}: ${({ animationDuration }) => | ||
| animationDuration ? `${animationDuration}ms` : `var(${tokens.shimmerDuration})`}; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Fix duration fallback handling across all animation paths.
The style files assign each duration token to var(the same token) when no override exists. This shadows the configured token and forces the animation mixins to use hard-coded fallbacks. The Storybook adapter and style checks also discard 0. Use an explicit undefined check, omit the CSS declaration when no override exists, and use ?? in the stories.
packages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts#L28-L29: preserve the configured shimmer token.packages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts#L40-L41: preserve the configured pulse token.packages/plasma-new-hope/src/components/Skeleton/RectSkeleton/RectSkeleton.styles.ts#L21-L22: preserve the configured shimmer token.packages/plasma-new-hope/src/components/Skeleton/RectSkeleton/RectSkeleton.styles.ts#L33-L34: preserve the configured pulse token.packages/plasma-new-hope/src/components/Skeleton/hoc/withSkeleton.styles.ts#L11-L12: preserve the configured shimmer token.packages/plasma-new-hope/src/components/Skeleton/hoc/withSkeleton.styles.ts#L18-L19: preserve the configured pulse token.utils/plasma-sb-utils/src/components/Skeleton/stories.tsx#L118-L124: replaceanimationDuration || undefinedwithanimationDuration ?? undefined.
Suggested pattern
- ${tokens.shimmerDuration}: ${({ animationDuration }) =>
- animationDuration ? `${animationDuration}ms` : `var(${tokens.shimmerDuration})`};
+ ${({ animationDuration }) =>
+ animationDuration !== undefined
+ ? `${tokens.shimmerDuration}: ${animationDuration}ms;`
+ : ''}
- duration: animationDuration || undefined,
+ duration: animationDuration ?? undefined,📍 Affects 4 files
packages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts#L28-L29(this comment)packages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts#L40-L41packages/plasma-new-hope/src/components/Skeleton/RectSkeleton/RectSkeleton.styles.ts#L21-L22packages/plasma-new-hope/src/components/Skeleton/RectSkeleton/RectSkeleton.styles.ts#L33-L34packages/plasma-new-hope/src/components/Skeleton/hoc/withSkeleton.styles.ts#L11-L12packages/plasma-new-hope/src/components/Skeleton/hoc/withSkeleton.styles.ts#L18-L19utils/plasma-sb-utils/src/components/Skeleton/stories.tsx#L118-L124
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@packages/plasma-new-hope/src/components/Skeleton/LineSkeleton/LineSkeleton.styles.ts`
around lines 28 - 29, Duration overrides incorrectly shadow configured animation
tokens and discard zero-valued Storybook settings. In LineSkeleton.styles.ts
lines 28-29 and 40-41, RectSkeleton.styles.ts lines 21-22 and 33-34, and
withSkeleton.styles.ts lines 11-12 and 18-19, check animation durations
explicitly against undefined and omit the CSS declaration when no override is
provided so configured tokens remain effective; in
utils/plasma-sb-utils/src/components/Skeleton/stories.tsx lines 118-124, replace
the falsy fallback with nullish coalescing so zero is preserved.
Comment on lines
+118
to
+124
| duration: animationDuration || undefined, | ||
| } | ||
| : { type: 'shimmer' as const, customGradientColor: customGradientColor || undefined }; | ||
| : { | ||
| type: 'shimmer' as const, | ||
| customGradientColor: customGradientColor || undefined, | ||
| duration: animationDuration || undefined, | ||
| }; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Do not discard an explicit zero duration.
animationDuration || undefined converts 0 to undefined before the value reaches withSkeleton. Use animationDuration ?? undefined or pass the value directly. If 0 is not supported, define and enforce a positive minimum instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@utils/plasma-sb-utils/src/components/Skeleton/stories.tsx` around lines 118 -
124, Update the animation options in the withSkeleton configuration to preserve
an explicit zero animationDuration by replacing the truthiness fallback with
nullish handling or direct propagation. Apply this consistently in both branches
of the visible conditional while retaining undefined for absent values.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Core
Skeleton
animationDurationдля управления скоростью анимацииWhat/why changed
animationDurationдля управления скоростью анимацииSkeleton📦 Published PR as canary version:
Canary Versions✨ Test out this PR locally via:
npm install @salutejs/plasma-asdk@0.387.0-canary.3024.31101721137.0 npm install @salutejs/plasma-b2c@1.629.0-canary.3024.31101721137.0 npm install @salutejs/plasma-colors@0.18.0-canary.3024.31101721137.0 npm install @salutejs/plasma-core@1.236.0-canary.3024.31101721137.0 npm install @salutejs/plasma-giga@0.356.0-canary.3024.31101721137.0 npm install @salutejs/plasma-homeds@0.356.0-canary.3024.31101721137.0 npm install @salutejs/plasma-hope@1.383.0-canary.3024.31101721137.0 npm install @salutejs/plasma-icons@1.245.0-canary.3024.31101721137.0 npm install @salutejs/plasma-new-hope@0.373.0-canary.3024.31101721137.0 npm install @salutejs/plasma-tokens@1.147.0-canary.3024.31101721137.0 npm install @salutejs/plasma-tokens-b2b@1.61.0-canary.3024.31101721137.0 npm install @salutejs/plasma-tokens-b2c@0.72.0-canary.3024.31101721137.0 npm install @salutejs/plasma-tokens-core@0.9.0-canary.3024.31101721137.0 npm install @salutejs/plasma-tokens-web@1.76.0-canary.3024.31101721137.0 npm install @salutejs/plasma-typo@0.49.0-canary.3024.31101721137.0 npm install @salutejs/plasma-web@1.631.0-canary.3024.31101721137.0 npm install @salutejs/sdds-bizcom@0.361.0-canary.3024.31101721137.0 npm install @salutejs/sdds-cs@0.365.0-canary.3024.31101721137.0 npm install @salutejs/sdds-dfa@0.359.0-canary.3024.31101721137.0 npm install @salutejs/sdds-finai@0.352.0-canary.3024.31101721137.0 npm install @salutejs/sdds-insol@0.356.0-canary.3024.31101721137.0 npm install @salutejs/sdds-insol-next@0.355.0-canary.3024.31101721137.0 npm install @salutejs/sdds-netology@0.360.0-canary.3024.31101721137.0 npm install @salutejs/sdds-os@0.31.0-canary.3024.31101721137.0 npm install @salutejs/sdds-platform-ai@0.360.0-canary.3024.31101721137.0 npm install @salutejs/sdds-sbcom@0.361.0-canary.3024.31101721137.0 npm install @salutejs/sdds-scan@0.359.0-canary.3024.31101721137.0 npm install @salutejs/sdds-serv@0.360.0-canary.3024.31101721137.0 npm install @salutejs/core-themes@0.37.0-canary.3024.31101721137.0 npm install @salutejs/plasma-themes@0.59.0-canary.3024.31101721137.0 npm install @salutejs/sdds-themes@0.74.0-canary.3024.31101721137.0 npm install @salutejs/sdds-api-tests@0.18.0-canary.3024.31101721137.0 npm install @salutejs/plasma-cy-utils@0.166.0-canary.3024.31101721137.0 npm install @salutejs/plasma-sb-utils@0.237.0-canary.3024.31101721137.0 npm install @salutejs/plasma-tokens-utils@0.57.0-canary.3024.31101721137.0 # or yarn add @salutejs/plasma-asdk@0.387.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-b2c@1.629.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-colors@0.18.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-core@1.236.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-giga@0.356.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-homeds@0.356.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-hope@1.383.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-icons@1.245.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-new-hope@0.373.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-tokens@1.147.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-tokens-b2b@1.61.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-tokens-b2c@0.72.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-tokens-core@0.9.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-tokens-web@1.76.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-typo@0.49.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-web@1.631.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-bizcom@0.361.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-cs@0.365.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-dfa@0.359.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-finai@0.352.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-insol@0.356.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-insol-next@0.355.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-netology@0.360.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-os@0.31.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-platform-ai@0.360.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-sbcom@0.361.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-scan@0.359.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-serv@0.360.0-canary.3024.31101721137.0 yarn add @salutejs/core-themes@0.37.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-themes@0.59.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-themes@0.74.0-canary.3024.31101721137.0 yarn add @salutejs/sdds-api-tests@0.18.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-cy-utils@0.166.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-sb-utils@0.237.0-canary.3024.31101721137.0 yarn add @salutejs/plasma-tokens-utils@0.57.0-canary.3024.31101721137.0Summary by CodeRabbit
New Features
LineSkeleton,RectSkeleton, andTextSkeleton.withSkeletonthroughanimationConfig.duration.Documentation