#Smart Skeleton 0.4.0

The SmartSkeleton component is a powerful and automatic way to display loading states. Instead of manually creating skeletons for each component, SmartSkeleton intelligently mirrors the visual layout of its children and replaces them with shimmer placeholders.

This component is designed to be used with any component, and it will automatically detect the layout and replace it with a skeleton. This means that you can use it with any component, and it will work out of the box.

Is a great way to improve the user experience of your application by providing a smooth loading experience. It is also a great way to reduce the amount of code you need to write, as it automatically generates the skeletons for you.

Avoid layout jumps (CLS) and provide visual feedback with smart placeholders.

Installation

Install smart-skeleton-react using your preferred package manager:

pnpm add @ela-labs/smart-skeleton-react

Examples: Basic usage

This exemples show how to use the SmartSkeleton component with a card component. The card is a simple component that shows a title, a description, and an image. The SmartSkeleton component is used to show a loading state while the content is being loaded.

Create project
Deploy your new project in one-click.

This exemples show how to use the SmartSkeleton component with a card component. The card is a simple component that shows a title, a description, and an image. The SmartSkeleton component is used to show a loading state while the content is being loaded.

Examples: Complex usage

This is a complex table example that shows how to use the SmartSkeleton component with a table component, notice that the usage is the same as the basic example, but the the table component is more complex and has more nodes. Meaning that the SmartSkeleton component will automatically detect the layout and replace it with a skeleton.

Status
Amount
success
ken99@example.com
$316.00
success
Abe45@example.com
$242.00
processing
Monserrat44@example.com
$837.00
success
Silas22@example.com
$874.00
failed
carmella@example.com
$721.00
0 of 5 row(s) selected.

🛠 Style Customization

Important: Import the CSS file in your main file (e.g., index.tsx or App.tsx) to ensure the skeletons are styled correctly.
import '@ela-labs/smart-skeleton-react/index.css';
OR
You can also customize the skeleton styles by overriding the CSS variables in your CSS file. Here are the default values:
.skeleton-shimmer { position: relative !important; background-color: #d1d5db !important; /* gray-300 */ overflow: hidden !important; border-radius: 6px !important; }
.skeleton-shimmer::after { content: ""; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: skewX(-20deg); animation: shimmer-move 1.6s infinite ease-in-out; } }
@keyframes shimmer-move { 0% { left: -50%; } 100% { left: 100%; } }
Component API
Prop Type Default Description
loading boolean — Enables or disables the loading state. When true, renders the skeletons.
keepMountOnLoading boolean false Keeps the original content mounted during loading (useful to avoid reflows or loss of component state if necessary). 'Not recommended'
maxDepth number 10 Limits the maximum depth of the DOM tree parsed to generate skeletons.
mode performance or { resize?: boolean, scroll?: boolean, mutation?: boolean, mutationResize?: boolean } performance Defines the operating mode: • performance: static ----- • object: activates dynamic listeners to update skeletons according to events.
children React.ReactElement | React.ReactElement[] — The content that will be displayed or that will serve as the basis for the skeletons.