BitShimmer improvements (#9767)#9784
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe pull request revises the BitShimmer component by updating its rendering logic, parameters, and styles. The changes include replacing deprecated parameters and methods with more intuitive ones—introducing new parameters such as AnimationDelay, AnimationDuration, BackgroundColor, Pulse, Circle, and WaveColor—and enhancing CSS with a new variable and refined keyframe names. Additionally, obsolete enums for animation and shape have been removed, and the demo pages updated to reflect the new configuration options. Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor.cs (1)
20-25: Clarify parameter names and XML docs.
BothBackgroundColorandWaveColorhave the same summary, describing them as “the color of the animated part.” This can lead to confusion. Recommend updating one or both names/documentation to more clearly distinguish the shimmer’s base color versus the wave animation color.A possible documentation fix:
-/// The color of the animated part of the shimmer. +/// The background color of the shimmer container.-/// The color of the animated part of the shimmer. +/// The wave animation color of the shimmer.Also applies to: 71-75
src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.scss (2)
83-137: Introducing State-specific Background Variable Overrides
New state classes such as.bit-smr-pri,.bit-smr-sec,.bit-smr-ter,.bit-smr-inf,.bit-smr-suc,.bit-smr-wrn,.bit-smr-swr, and.bit-smr-errhave been added to override the--bit-smr-bg-clrvariable using various color variables. Likewise, additional classes (.bit-smr-pbg, .bit-smr-sbg, .bit-smr-tbg, .bit-smr-pfg, .bit-smr-sfg, .bit-smr-tfg) offer more granular control. This systematic approach improves customizability.Consider leveraging SCSS loops or mixins to generate these similar classes dynamically if more states are likely to be introduced.
152-218: Adding Direct Background Color Classes for States
The new background color classes (e.g.,.bit-smr-bpri,.bit-smr-bsec,.bit-smr-bter,.bit-smr-binf,.bit-smr-bsuc,.bit-smr-bwrn,.bit-smr-bswr,.bit-smr-berr,.bit-smr-bpbg,.bit-smr-bsbg,.bit-smr-btbg,.bit-smr-bpfg,.bit-smr-bsfg,.bit-smr-btfg,.bit-smr-bpbr,.bit-smr-bsbr,.bit-smr-btbr) apply direct background-color assignments via specific color variables. This offers explicit styling control for each state.If the list of states expands further, you might explore abstracting these declarations into a reusable SCSS mixin or function to reduce code duplication.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor.cs(4 hunks)src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.scss(6 hunks)src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmerAnimation.cs(0 hunks)src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmerShape.cs(0 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor.cs(6 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor.scss(1 hunks)
💤 Files with no reviewable changes (2)
- src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmerShape.cs
- src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmerAnimation.cs
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (44)
src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor.cs (7)
9-12: Looks good for animation delay support.
No functionality concerns.
14-19: Duration parameter addition appears solid.
Implementation is consistent with typical usage for animation durations.
26-29: Pulse parameter looks fine.
Straightforward boolean toggling with no immediate issues identified.
49-50: Height property approach is fine.
No errors or performance concerns.
58-60: Circle parameter naming is intuitive.
Implementation for circular shimmer is clear.
95-120: CSS class registration logic looks correct.
No issues found; fallback tobit-smr-tbgis consistent.
124-161: Wrapper, animation class, and style generation are well-structured.
The usage of separate methods for wrapper class, animation class, and style fosters clarity.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor.cs (18)
9-13: Parameter list update: AnimationDelay.
Consistent with BitShimmer changes.
14-20: Parameter list update: AnimationDuration.
Aligns with new BitShimmer property.
21-29: BackgroundColor parameter in the demo.
Documented usage is consistent with the new parameter in BitShimmer.
30-35: Pulse parameter in the demo.
Looks correct; example usage is straightforward.
76-80: Circle parameter in the component parameters list.
Accurate reflection of the new property.
99-105: WaveColor parameter in the demo.
Mirrors BitShimmer.
108-112: Width parameter enhancements.
Matches the newly extended usage in BitShimmer.
155-268: Color enum additions.
Well-defined comprehensive set of color options.
272-273: New boolean field isDataLoaded.
Correct usage for controlling shimmer.
274-275: New boolean field isContentLoaded.
Same reasoning as isDataLoaded; no issues.
282-283: Example #2 updates.
Demonstrates both linear and circular shimmer usage.
286-291: Example #3 new animation parameters.
Properly illustrates animation delay and duration.
303-328: Example #5 expansions.
Showcases content vs. shimmer template usage with toggling.
332-349: Example #6 wave color usage.
Provides a clear demonstration of the new wave color parameter.
351-368: Example #7 background color usage.
Demonstrates the new background color parameter effectively.
372-372: Custom box-shadow styling.
No problems identified with the example.
390-391: Example #8 usage with inline styles or custom class.
Straightforward illustration of shimmer styling.
393-397: Additional example #8 usage.
Combines custom classes and inline styles for advanced styling.src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor (1)
22-23: Rendering logic updates for wrapper and animation.
The new calls to@GetWrapperClass()and@GetAnimationClass()plus@GetAnimationStyle()properly implement the added parameters for shape and animation timing. No issues detected.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor (8)
14-16: LGTM! Clear and concise basic example.The example effectively demonstrates the fundamental usage of BitShimmer with appropriate height parameter.
22-28: LGTM! Clear demonstration of shape options.The example effectively showcases both default line and circle shapes using the new Circle parameter.
34-43: LGTM! Comprehensive animation examples.The examples effectively demonstrate:
- Wave animation with custom duration and delay
- Pulse animation with both circle and line shapes
- Good use of BitStack for layout
49-55: LGTM! Well-structured IsDataLoaded example.Good demonstration of:
- Conditional content display
- Accessibility with AriaLabel
- Interactive toggle functionality
61-87: LGTM! Excellent advanced example.The example effectively demonstrates:
- Complex nested structure with Content and ShimmerTemplate
- Good use of BitStack for layout
- Integration with other components (BitImage, BitPersona)
93-145: LGTM! Comprehensive WaveColor examples.Excellent demonstration of all available BitColor options with consistent styling and clear indication of the default color.
150-202: LGTM! Comprehensive BackgroundColor examples.Excellent demonstration of all available BitColor options with consistent styling and clear indication of the default color.
207-222: LGTM! Well-structured style customization examples.The example effectively demonstrates:
- Inline style customization
- Class-based styling
- Component-specific styling using Styles and Classes dictionaries
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor.scss (1)
1-18: LGTM! Clean and focused style customizations.The changes effectively:
- Update box-shadow with blur radius for better visual effect
- Remove unused classes (.shimmer-container, .custom-content)
- Maintain consistent styling for remaining classes
src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.scss (9)
5-5: CSS Variable Initialization for Background Color
The new CSS variable--bit-smr-bg-clris initialized with the interpolated value#{$clr-bg-ter}. This centralizes the color definition for easier theming and consistency.
7-15: Renaming & Defining Wave Animation Keyframes
The keyframes for the wave animation have been renamed tobit-smr-anim-waveand defined correctly. This update promotes a consistent naming approach across the component's animations.
17-25: Renaming & Defining Pulse Animation Keyframes
The pulse animation keyframes are now declared asbit-smr-anim-pulse. The transition from opacity 0 to 1 is clear and aligns with the new naming standards.
27-35: Renaming & Defining Opacity Animation Keyframes
The opacity animation keyframes have been updated tobit-smr-anim-opacity, ensuring consistency in naming. The implementation correctly transitions from 0% to 100% opacity.
42-42: Updating Animation Name for Content Container
In the.bit-smr-cntclass, the animation name is now set tobit-smr-anim-opacity, which adheres to the updated naming convention. Verify that the opacity effect meets the desired design.
50-54: Updating Wrapper Animation Settings
Within the.bit-smr-wrpclass, addinganimation-timing-function: easeand updating theanimation-nametobit-smr-anim-opacityensures smoother animation transitions. This change is consistent with the overall refactoring of animation parameters.
68-70: Utilizing CSS Variable for Animation Background
The.bit-smr-anmclass now usesbackground: var(--bit-smr-bg-clr), replacing any hardcoded color. This enhances maintainability and allows the background to be dynamically controlled via CSS variables.
73-76: Refactoring Wave Animation & Background Gradient
The.bit-smr-wavclass has been updated to apply thebit-smr-anim-waveanimation with appropriate timing and delay. Its background now uses a linear gradient built on thevar(--bit-smr-bg-clr)variable, which boosts consistency in styling.
78-80: Updating Pulse Animation Reference
The.bit-smr-pulclass clearly now employs thebit-smr-anim-pulseanimation, harmonizing the animation naming throughout the file.
2 participants
closes #9767
Summary by CodeRabbit
New Features
Style
Documentation