mirror of
https://github.com/vercel/commerce.git
synced 2025-07-29 21:21:23 +00:00
.github
.vscode
packages
site
assets
components
auth
cart
checkout
common
icons
product
ui
Button
Collapse
Container
Dropdown
ErrorMessage
Grid
Hero
Input
Link
LoadingDots
Logo
Marquee
Modal
Quantity
Rating
Sidebar
Skeleton
Skeleton.module.css
Skeleton.tsx
index.ts
Text
ThemeSwitcher
README.md
context.tsx
index.ts
wishlist
search.tsx
config
lib
pages
public
.env.template
.eslintrc
.gitignore
.npmrc
.prettierignore
.prettierrc
commerce-config.js
commerce.config.json
global.d.ts
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
.editorconfig
.gitignore
.prettierignore
.prettierrc
README.md
license.md
package-lock.json
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
turbo.json
yarn.lock
* Updated log * Updates to root * Updates to pnpm * successfully moved to pnpm * type issue * Local as the default provider * Upgrade dependencies * Revert to local * Upgrade React * Update node-fetch deps * Fix types * Ignore warnings * Fix missing dependency * Update pnpm-lock.yaml * Add missing @types/cookie * Upgrade dependencies * Fix missing dependencies * Update README.md Co-authored-by: Bel Curcio <curciobel@gmail.com>
59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
import React, { CSSProperties } from 'react'
|
|
import cn from 'clsx'
|
|
import px from '@lib/to-pixels'
|
|
import s from './Skeleton.module.css'
|
|
|
|
interface SkeletonProps {
|
|
show?: boolean
|
|
block?: boolean
|
|
className?: string
|
|
style?: CSSProperties
|
|
width?: string | number
|
|
height?: string | number
|
|
boxHeight?: string | number
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
const Skeleton: React.FC<SkeletonProps> = ({
|
|
style,
|
|
width,
|
|
height,
|
|
children,
|
|
className,
|
|
show = true,
|
|
boxHeight = height,
|
|
}) => {
|
|
// Automatically calculate the size if there are children
|
|
// and no fixed sizes are specified
|
|
const shouldAutoSize = !!children && !(width || height)
|
|
|
|
// Defaults
|
|
width = width || 24
|
|
height = height || 24
|
|
boxHeight = boxHeight || height
|
|
|
|
return (
|
|
<span
|
|
className={cn(s.skeleton, className, {
|
|
[s.show]: show,
|
|
[s.wrapper]: shouldAutoSize,
|
|
[s.loaded]: !shouldAutoSize && !!children,
|
|
})}
|
|
style={
|
|
shouldAutoSize
|
|
? {}
|
|
: {
|
|
minWidth: px(width),
|
|
minHeight: px(height),
|
|
marginBottom: `calc(${px(boxHeight)} - ${px(height)})`,
|
|
...style,
|
|
}
|
|
}
|
|
>
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default Skeleton
|