Skip to content

Create skeleton card component #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tamir198 merged 7 commits into from
Jun 7, 2026
Merged

Create skeleton card component #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9904d54
Create skeleton card component
rotemergty5 May 16, 2026
fd424d6
Update skeleton component
rotemergty5 May 19, 2026
fdd253b
update skeleton
rotemergty5 May 26, 2026
fb96d6f
fix prettier issues in skeleton component
rotemergty5 Jun 1, 2026
c5b6a60
Add unit tests for SGLSelect
rotemergty5 Jun 1, 2026
6a12734
Revert "Fix SGLSelect tests"
rotemergty5 Jun 6, 2026
5386389
Revert "Add unit tests for SGLSelect"
rotemergty5 Jun 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions src/components/UI/Skeleton/SGLSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import Skeleton, { type SkeletonProps as MuiSkeletonProps } from '@mui/material/Skeleton'

import type { CSSProperties } from '@mui/material/styles'
import { skeletonStyles } from './styles'

interface SGLSkeletonProps extends Omit<MuiSkeletonProps, 'style' | 'sx'> {
style?: CSSProperties
}

export const SGLSkeleton = ({ animation = 'wave', style, ...props }: SGLSkeletonProps) => {
return (
<Skeleton
sx={(theme) => ({
...skeletonStyles(theme),
...style,
})}
Comment on lines +13 to +16

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 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:

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.

animation={animation}
{...props}
/>
)
}
12 changes: 12 additions & 0 deletions src/components/UI/Skeleton/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import type { Theme } from '@mui/material/styles'

export const skeletonStyles = (theme: Theme) => {
return {
backgroundColor: theme.palette.lightGrey.main,
opacity: 1,

'&.MuiSkeleton-wave::after': {
animationDuration: '1.6s',
},
}
}
Loading