🦴 Create Smooth Skeleton Loaders in React with `skeleton-loader-ap` – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by Er. Ankit Parashar

Skeleton loaders are one of the most effective ways to improve perceived performance in a React app. Instead of showing a blank screen or a generic spinner, you simulate the layout of your content while it’s loading.

With skeleton-loader-ap, adding responsive, customizable loading placeholders is super simple.

skeleton-loader-ap

Why Use Skeleton Loaders?

They hint at content layout before it’s loaded
Improve perceived speed and UX
More context than loading spinners
Great for images, avatars, text, cards, and more

Installation

Install with npm:


bash
npm install skeleton-loader-ap
Or with Yarn:

bash
Copy
Edit
yarn add skeleton-loader-ap

🔧 Components Overview

1. <Skeleton /> – Base Skeleton Block

<Skeleton width="100%" height="1rem" borderRadius="6px" />
Props:

width (string | number)

height (string | number)

circle (boolean)

borderRadius (string | number)

placeholder (boolean | string) – true or custom image path

opacity (number | string)

2. <SkeletonImage /> – Image Loader


<SkeletonImage size={80} circle placeholder />
Extra Props:

size – square size for both width/height

circle – inferred if size is passed

3. <SkeletonParagraph /> – Multi-line Loader
<SkeletonParagraph
  rows={3}
  widths={['90%', '100%', '80%']}
  spacing="0.75rem"
  placeholder
/>
Props:

rows – number of lines (default 3)

widths – array of individual line widths

lineHeight – default '1rem'

spacing – default '0.5rem'

placeholder, opacity, borderRadius

4. <SkeletonClientWrapper /> – Auto Loader Wrapper
<SkeletonClientWrapper
  type="Image"
  size={100}
  circle
  placeholder
  loadertime={3000}
/>


<SkeletonClientWrapper
  type="Paragraph"
  rows={4}
  widths={['90%', '100%', '80%', '70%']}
  placeholder
/>
Props:

type: 'Image' or 'Paragraph'

loadertime: how long (in ms) to show skeleton

All props passed to respective component

🪄 useSkeleton Hook
Manually control loading:

const loading = useSkeleton(3000); // `true` for 3 seconds
Use this to conditionally show skeletons or actual content.

🖼 Placeholder Images
Built-in default image:


<Skeleton placeholder />
Custom image from /public/Images/your-loader.gif:

<Skeleton placeholder="/Images/custom-spinner.gif" />

🧪 Full Example

import {
  SkeletonClientWrapper,
  SkeletonImage,
  SkeletonParagraph,
} from 'skeleton-loader-ap';

function ProfileLoader() {
  return (
    <div className="flex gap-4">
      <SkeletonClientWrapper
        type="Image"
        size={80}
        circle
        placeholder
        loadertime={3000}
      />
      <SkeletonClientWrapper
        type="Paragraph"
        rows={3}
        widths={['80%', '90%', '70%']}
        placeholder
        spacing="1rem"
      />
    </div>
  );
}
🌟 Features Recap
🛠 Highly customizable

🧩 Modular components (Image, Text, Block)

⏳ Client-side wrapper for simulated loading

🪄 Hook for manual control

🖼 Built-in + custom image placeholders

📦 Lightweight with no external dependencies

🔗 Links(https://github.com/ankitparashar700/npm-skeleton-loader-ap/)
🔗 View on NPM

🔧 GitHub Repository

If this helped you, give the package a ⭐ on GitHub and share it with your dev team!

Happy loading! 🦴

This content originally appeared on DEV Community and was authored by Er. Ankit Parashar