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

Open
rotemergty5 wants to merge 3 commits into
base: main
Choose a base branch
from
+39 −0
Open

Create skeleton card component #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 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
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
27 changes: 27 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,27 @@
import Skeleton, {

Check failure on line 1 in src/components/UI/Skeleton/SGLSkeleton.tsx

View workflow job for this annotation

GitHub Actions / Build, lint, prettier and tests 

Replace `␍⏎··type·SkeletonProps·as·MuiSkeletonProps,␍⏎` with `·type·SkeletonProps·as·MuiSkeletonProps·`
type SkeletonProps as MuiSkeletonProps,
} from '@mui/material/Skeleton'
Comment on lines +1 to +3
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 19, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

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.


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

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

export const SGLSkeleton = ({

Check failure on line 12 in src/components/UI/Skeleton/SGLSkeleton.tsx

View workflow job for this annotation

GitHub Actions / Build, lint, prettier and tests 

Replace `␍⏎··animation·=·'wave',␍⏎··style,␍⏎··...props␍⏎` with `·animation·=·'wave',·style,·...props·`
animation = 'wave',
style,
...props
}: SGLSkeletonProps) => {
return (
<Skeleton
sx={(theme) => ({
...skeletonStyles(theme),
...style,
})}
Comment on lines +19 to +22
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 26, 2026

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}
/>
)
}

Check failure on line 27 in src/components/UI/Skeleton/SGLSkeleton.tsx

View workflow job for this annotation

GitHub Actions / Build, lint, prettier and tests 

Insert `␍⏎`
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',
},
}
}

Check failure on line 12 in src/components/UI/Skeleton/styles.ts

View workflow job for this annotation

GitHub Actions / Build, lint, prettier and tests 

Insert `⏎`
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 26, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

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.

Loading