Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
solid-loading-skeleton
Advanced tools
Light and customizable Solid component to create skeleton screens that automatically adapt to your app!
Light and customizable Solid component to create skeleton screens that automatically adapt to your app!
Install it:
npm i solid-marquee
# or
yarn add solid-marquee
# or
pnpm add solid-marquee
import Skeleton from "solid-loading-skeleton"
import "solid-loading-skeleton/dist/skeleton.css"
const App = () => {
return (
<Skeleton /> // A simple, single-line loading skeleton
<Skeleton count={5} /> // Fie-line loading skeleton
)
}
The Skeleton
component should be used directly in your components in place of content that is loading. While other libraries require you to meticulously craft a skeleton screen that matches the font size, line height, and margins of your content, the Skeleton
component is automatically sized to the correct dimensions.
For example:
const BlogPost = (props) => {
return(
<div>
<h1>{props.title || <Skeleton />}</h1>
{props.body || <Skeleton count={10} />}
</div>
)
}
...will produce correctly-sized skeletons for the heading and body without any further configuration.
This ensures the loading state remains up-to-date with any changes to your layout or typography.
Instead, make components with built-in skeleton states.
This approach is beneficial because:
Customize individual skeletons with props, or render a SkeletonTheme to style all skeletons below it in the React hierarchy:
import Skeleton, { SkeletonTheme } from "solid-loading-skeleton";
return (
<SkeletonTheme baseColor="#202020" highlightColor="#444">
<p>
<Skeleton count={3} />
</p>
</SkeletonTheme>
);
Skeleton
onlyProp | Description | Default |
---|---|---|
count?: number |
The number of lines of skeletons to render. If
count is a decimal number like 3.5,
three full skeletons and one half-width skeleton will be
rendered.
| 1 |
wrapper?: (props: any) => JSXElement | A custom wrapper component that goes around the individual skeleton elements. | |
circle?: boolean |
Makes the skeleton circular by setting border-radius to
50% .
| false |
className?: string |
A custom class name for the individual skeleton elements which is used
alongside the default class, solid-loading-skeleton .
| |
containerClassName?: string |
A custom class name for the <span> that wraps the
individual skeleton elements.
| |
style?: JSX.CSSProperties |
This is an escape hatch for advanced use cases and is not the preferred
way to style the skeleton. Props (e.g. width ,
borderRadius ) take priority over this style object.
|
Skeleton
and SkeletonTheme
Prop | Description | Default |
---|---|---|
baseColor?: string | The background color of the skeleton. | #ebebeb |
highlightColor?: string | The highlight color in the skeleton animation. | #f5f5f5 |
width?: string | number | The width of the skeleton. | 100% |
height?: string | number | The height of each skeleton line. | The font size |
borderRadius?: string | number | The border radius of the skeleton. | 0.25rem |
inline?: boolean |
By default, a <br /> is inserted after each skeleton so
that each skeleton gets its own line. When inline is true, no
line breaks are inserted.
| false |
duration?: number | The length of the animation in seconds. | 1.5 |
direction?: "base" | "alternate" | "reverse" | "alternate-reverse" | The direction of the animation, either left-to-right or right-to-left. | "base" |
enableAnimation?: boolean |
Whether the animation should play. The skeleton will be a solid color when
this is false . You could use this prop to stop the animation
if an error occurs.
| true |
1.0.0
FAQs
Light and customizable Solid component to create skeleton screens that automatically adapt to your app!
The npm package solid-loading-skeleton receives a total of 9 weekly downloads. As such, solid-loading-skeleton popularity was classified as not popular.
We found that solid-loading-skeleton demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.