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.
✅ 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! 🦴 
Top comments (0)