Create skeleton card component#70
Conversation
📝 WalkthroughWalkthroughSGLSkeleton was refactored to use a new theme-based ChangesSkeleton Components Library
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/components/UI/Skeleton/SGLContentCardSkeleton.css (1)
142-143: ⚡ Quick winReplace deprecated
word-break: break-word.Use modern wrapping behavior (
overflow-wrap) and avoid deprecatedword-breakkeyword.Proposed fix
.image-description { position: relative; @@ - word-break: break-word; overflow-wrap: anywhere; }🤖 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 `@src/components/UI/Skeleton/SGLContentCardSkeleton.css` around lines 142 - 143, The CSS rule in SGLContentCardSkeleton.css currently uses the deprecated declaration "word-break: break-word"; remove that line and rely on "overflow-wrap: anywhere" (or add "word-break: break-all" only if intentional hard breaks are needed) so update the selector containing "word-break: break-word" to delete that property and keep "overflow-wrap: anywhere" as the modern wrapping behavior.
🤖 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 `@src/components/UI/Skeleton/SGLContentCardSkeleton.css`:
- Around line 92-101: The CSS for .sgl-image-wrapper hardcodes height: 180px
which prevents the component from honoring the imageHeight prop; remove the
fixed height declaration from .sgl-image-wrapper and either rely on inline
styles set by the component using the imageHeight prop or add a CSS variable
(e.g., height: var(--sgl-image-height, auto)) that the component can set from
imageHeight, ensuring the wrapper's height becomes configurable at runtime.
- Around line 51-54: The CSS declaration in the .sgl-text-wrapper rule uses
invalid quoted value width: 'fit-content'; which gets ignored; update the
.sgl-text-wrapper rule to use a valid value (remove the quotes so it reads
fit-content) or use an appropriate alternative (e.g., display: inline-block or
width: max-content) to achieve the intended sizing behavior for the element.
In `@src/components/UI/Skeleton/SGLSkeleton.tsx`:
- Around line 35-41: In SGLSkeleton update the component to avoid spreading the
incoming sx (which may be an array or function) into an object; instead build a
baseSx object containing the conditional fontSize (from variant/textSize),
bgcolor (skeletonColor), borderRadius (radius), and opacity, and pass the prop
as an array composition like sx={[baseSx, sx]} so MUI can handle
object/array/function SxProps correctly; modify the code around the sx
assignment in SGLSkeleton to create baseSx and supply sx as an array rather than
using ...sx.
---
Nitpick comments:
In `@src/components/UI/Skeleton/SGLContentCardSkeleton.css`:
- Around line 142-143: The CSS rule in SGLContentCardSkeleton.css currently uses
the deprecated declaration "word-break: break-word"; remove that line and rely
on "overflow-wrap: anywhere" (or add "word-break: break-all" only if intentional
hard breaks are needed) so update the selector containing "word-break:
break-word" to delete that property and keep "overflow-wrap: anywhere" as the
modern wrapping behavior.
🪄 Autofix (Beta)
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
Run ID: 5cad883a-36b0-44b4-a597-a96d5a09a486
📒 Files selected for processing (3)
src/components/UI/Skeleton/SGLContentCardSkeleton.csssrc/components/UI/Skeleton/SGLContentCardSkeleton.tsxsrc/components/UI/Skeleton/SGLSkeleton.tsx
Tamir198
left a comment
Tamir198
left a comment
There was a problem hiding this comment.
We are implementing our UI components in the project based on material ui (MUI) library and they already got ready to work skeleton that we can just wrap, check the docs :
https://mui.com/material-ui/react-skeleton/
The component should be similar in props to any other component under the ui folder, SGLCard for example is a simple one that you can take reference from
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@src/components/UI/Skeleton/SGLSkeleton.tsx`:
- Around line 1-3: Normalize the file's line endings from CRLF to LF for
src/components/UI/Skeleton/SGLSkeleton.tsx (including the import block
referencing Skeleton and MuiSkeletonProps) and any other affected lines (e.g.,
the occurrence at line 7), then re-run the project's formatter/prettier so the
file is saved with repository-preferred LF endings and formatting checks pass.
🪄 Autofix (Beta)
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
Run ID: 874b4398-eeb0-4054-9a90-13f0d5f15756
📒 Files selected for processing (1)
src/components/UI/Skeleton/SGLSkeleton.tsx
| import Skeleton, { | ||
| type SkeletonProps as MuiSkeletonProps, | ||
| } from '@mui/material/Skeleton' |
There was a problem hiding this comment.
Normalize line endings to satisfy CI formatting checks.
Prettier/lint failures indicate CRLF/newline formatting issues on this file. Please normalize to repository-preferred LF and re-run formatting so checks pass.
Also applies to: 7-7
🧰 Tools
🪛 GitHub Check: Build, lint, prettier and tests
[failure] 1-1:
Replace ␍⏎··type·SkeletonProps·as·MuiSkeletonProps,␍⏎ with ·type·SkeletonProps·as·MuiSkeletonProps·
🤖 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 `@src/components/UI/Skeleton/SGLSkeleton.tsx` around lines 1 - 3, Normalize the
file's line endings from CRLF to LF for
src/components/UI/Skeleton/SGLSkeleton.tsx (including the import block
referencing Skeleton and MuiSkeletonProps) and any other affected lines (e.g.,
the occurrence at line 7), then re-run the project's formatter/prettier so the
file is saved with repository-preferred LF endings and formatting checks pass.
Tamir198
left a comment
Tamir198
left a comment
There was a problem hiding this comment.
left some comments, also do you see linter errors when you run your code locally?
| return ( | ||
| <Skeleton | ||
| sx={{ | ||
| bgcolor: skeletonColor, |
There was a problem hiding this comment.
bgcolor is MUI prop, we dont want do to it, we want to create css object like we we in the rest of the components
| } | ||
|
|
||
| export const SGLSkeleton = ({ | ||
| skeletonColor = '#8F3DFF', |
There was a problem hiding this comment.
No hardcoded colors, bring theme from the theme object in theme.ts
| interface SGLSkeletonProps | ||
| extends Omit<MuiSkeletonProps, 'sx'> { | ||
| skeletonColor?: string | ||
| sx?: SxProps<Theme> |
There was a problem hiding this comment.
not sx, the component should accept styles object, check how we are doing it in other ui components
It worked for me, hope the new version works for you too. |
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 `@src/components/UI/Skeleton/SGLSkeleton.tsx`:
- Around line 19-22: The component SGLSkeleton currently spreads the incoming
style prop into the MUI sx object (sx={(theme)=>({...skeletonStyles(theme),
...style})}), which causes numeric values to be interpreted by the MUI system;
remove spreading style into sx and instead pass the style prop through as a
plain React inline style on the root element (e.g., use style={style}), keeping
skeletonStyles/theme-derived values in sx and merging only the incoming sx prop
(not style). Ensure the prop type remains style?: CSSProperties and update any
usage in SGLSkeleton where sx is composed (refer to skeletonStyles and the
existing sx merge) so style is applied as an ordinary DOM style, not part of sx.
In `@src/components/UI/Skeleton/styles.ts`:
- Line 12: The file src/components/UI/Skeleton/styles.ts is missing a trailing
newline which breaks Prettier; open styles.ts and ensure the file ends with a
single newline character (add a '\n' at EOF), save the file so the final closing
brace is followed by a newline, then re-run Prettier/commit the change.
🪄 Autofix (Beta)
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
Run ID: d987ac94-96d2-4c65-83ff-70deef110f93
📒 Files selected for processing (2)
src/components/UI/Skeleton/SGLSkeleton.tsxsrc/components/UI/Skeleton/styles.ts
| sx={(theme) => ({ | ||
| ...skeletonStyles(theme), | ||
| ...style, | ||
| })} |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In MUI v7, how does the sxprop interpret numeric values for properties like margin, padding, borderRadius, width, and height, and how does that differ from passing the same values through the Reactstyle prop?
💡 Result:
In MUI v7, the sx prop acts as a theme-aware interface that interprets numeric values differently depending on the specific CSS property [1]. Unlike the standard React style prop, which passes values directly to the browser as inline CSS styles (often requiring explicit units like 'px' or 'rem'), the sx prop maps numbers to theme-defined values or specific transformation functions [1]. Key behaviors for numeric values in the sx prop include: 1. Spacing (margin, padding): Numeric values are multiplied by the theme.spacing value (default is 8px) [1]. For example, sx={{ m: 2 }} results in a margin of 16px. 2. Sizing (width, height, minWidth, minHeight, maxWidth, maxHeight): These properties use a custom transform function [1]. If the numeric value is between (0, 1], it is converted to a percentage (e.g., sx={{ width: 0.5 }} becomes width: 50%). If the value is greater than 1, it is treated as a pixel value (e.g., sx={{ width: 20 }} becomes width: 20px) [1]. 3. borderRadius: Numeric values are multiplied by the theme.shape.borderRadius value (default is 4px) [1]. 4. Border: Numeric values are interpreted as pixel widths for a solid black border (e.g., sx={{ border: 1 }} equates to border: 1px solid black) [1]. In contrast, the React style prop performs no such transformations [2]. Passing a number to style (e.g., style={{ margin: 2 }}) is generally invalid for CSS properties that require units, as React will not automatically append 'px' to most numeric values, resulting in the style being ignored by the browser [2]. The sx prop provides a more concise, theme-integrated approach, whereas the style prop remains a standard, direct way to apply inline styles without MUI-specific logic or theme awareness [2].
Citations:
- 1: https://v7.mui.com/system/getting-started/the-sx-prop/
- 2: https://blog.stackademic.com/mui-when-to-use-the-sx-prop-vs-style-prop-for-styling-in-react-and-next-js-7997f2aca588
Fix style prop contract: don’t merge style into MUI sx
style?: CSSProperties implies React inline-style semantics, but spreading style into sx makes numeric values follow MUI system transforms (e.g., spacing via theme.spacing, borderRadius scaling via theme.shape.borderRadius, special transforms for width/height). That changes how callers’ values are interpreted versus a real React style prop.
Proposed fix
<Skeleton
- sx={(theme) => ({
- ...skeletonStyles(theme),
- ...style,
- })}
+ sx={(theme) => skeletonStyles(theme)}
+ style={style}
animation={animation}
{...props}
/>🤖 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 `@src/components/UI/Skeleton/SGLSkeleton.tsx` around lines 19 - 22, The
component SGLSkeleton currently spreads the incoming style prop into the MUI sx
object (sx={(theme)=>({...skeletonStyles(theme), ...style})}), which causes
numeric values to be interpreted by the MUI system; remove spreading style into
sx and instead pass the style prop through as a plain React inline style on the
root element (e.g., use style={style}), keeping skeletonStyles/theme-derived
values in sx and merging only the incoming sx prop (not style). Ensure the prop
type remains style?: CSSProperties and update any usage in SGLSkeleton where sx
is composed (refer to skeletonStyles and the existing sx merge) so style is
applied as an ordinary DOM style, not part of sx.
| animationDuration: '1.6s', | ||
| }, | ||
| } | ||
| } No newline at end of file |
There was a problem hiding this comment.
Add the missing trailing newline.
This file currently fails Prettier because it ends without a newline.
🧰 Tools
🪛 GitHub Check: Build, lint, prettier and tests
[failure] 12-12:
Insert ⏎
🤖 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 `@src/components/UI/Skeleton/styles.ts` at line 12, The file
src/components/UI/Skeleton/styles.ts is missing a trailing newline which breaks
Prettier; open styles.ts and ensure the file ends with a single newline
character (add a '\n' at EOF), save the file so the final closing brace is
followed by a newline, then re-run Prettier/commit the change.
|
@rotemergty5 Notice that the ESLint auto check failed. Please Fix it |
There was a problem hiding this comment.
@rotemergty5 The code works locally but you have prettier error, run prettier locally and push them
3 participants
I built Skeleton components in React and MUI in a clean and reusable way.
I created a base SGLSkeleton component that supports customizable colors, sizes, and styling, and on top of it I built a card component that includes a profile image, title, description, image, and button.
I also added support for passing different texts, colors, and images to each card, including a default placeholder image when no image is provided.
Summary by CodeRabbit
Refactor
New Features