🦴 Create Smooth Skeleton Loaders in React with `skeleton-loader-ap`

#nextjs #typescript #ui #webdev

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! 🦴

DEV Community

🦴 Create Smooth Skeleton Loaders in React with `skeleton-loader-ap`

✅ Why Use Skeleton Loaders?

📦 Installation

Top comments (0)