React/Next.js Auto Skeleton Loader - @shakhawat.dev/skeleton

Frontend Developer দের React/Next দিয়ে কাজ করতে গিয়ে সবচেয়ে বিরক্তিকর যে কাজটা বারবার করতে হয় সেটা হলো — loading state-এর জন্য skeleton UI হাতে করে বানানো।

প্রতিটা card, প্রতিটা list, প্রতিটা component-এর জন্য আলাদা করে div বসিয়ে, width-height মিলিয়ে, radius ঠিক করে skeleton design করা — অনেক সময় নষ্ট হয়, আর আসল UI বদলালে skeleton-ও হাতে করে আবার আপডেট করতে হয়।

এই সমস্যা সমাধান করতেই এই npm package টি :-

Packege Link : https://www.npmjs.com/package/@shakhawat.dev/skeleton

কী এই Package?

@shakhawat.dev/skeleton এমন একটি React Package যেটা আপনার আসল Component-এর DOM parse করে স্বয়ংক্রিয়ভাবে একই structure-এর Skeleton Loader তৈরি করে।

অর্থাৎ—

আপনি একবার Real Component লিখবেন।

Skeleton আর কখনো হাতে বানাতে হবে না।

Package নিজেই—

Element Size
Width / Height
Margin
Padding
Border Radius
Flex Layout
Grid Layout
Gap
Alignment

সব Measure করে Real UI-এর মতোই Skeleton Generate করবে।

Installation

আপনার Project Folder Open করুন।

npm
PowerShell
npm install "@shakhawat.dev/skeleton@latest"
Bash
npm install @shakhawat.dev/skeleton
Yarn
yarn add @shakhawat.dev/skeleton
Bun
PowerShell
bun install "@shakhawat.dev/skeleton@latest"
Bash
bun install @shakhawat.dev/skeleton

Note: PowerShell-এ package name @ দিয়ে শুরু হওয়ায় quotes ব্যবহার করতে হবে।

সবচেয়ে সহজ ব্যবহার (Recommended)

ধরুন আপনার একটি Profile Card আছে।

function ProfileCard({ user }) {
  return (
    <div id="uid-skeleton-profile-card" className="card">
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
      <button>Follow</button>
    </div>
  );
}

শুধু একটি id যোগ করলেন।

এখন Loading State-এ লিখুন—

import { AutoSkeleton } from "@shakhawat.dev/skeleton";

function Loader({ loading, user }) {
  if (loading) {
    return (
      <AutoSkeleton uid="uid-skeleton-profile-card" />
    );
  }

  return <ProfileCard user={user} />;
}

ব্যস - কোন Skeleton Design করতে হবে না।
Package নিজেই Profile Card-এর মতো Skeleton Generate করবে।

AutoSkeleton কীভাবে কাজ করে?

প্রথমবার Component Render হওয়ার পর Package—

• DOM Scan করে
• Element Measure করে
• Structure Parse করে
• Skeleton Tree তৈরি করে
• Memory এবং Session Storage-এ Cache করে রাখে

এরপর যখনই আপনি একই uid ব্যবহার করবেন—

<AutoSkeleton uid="uid-skeleton-profile-card" />

Package সঙ্গে সঙ্গে Cached Skeleton Render করবে।
অর্থাৎ প্রতিবার নতুন করে Measure করারও দরকার হবে না।

SkeletonBoundary (Alternative Way)

আপনি যদি id ব্যবহার করতে না চান তাহলে SkeletonBoundary ব্যবহার করতে পারেন।

import { SkeletonBoundary } from "@shakhawat.dev/skeleton";

<SkeletonBoundary
    id="uid-skeleton-profile-card"
    loading={loading}
>
    <ProfileCard user={user} />
</SkeletonBoundary>

এখানে Component-কে Wrapper-এর মধ্যে রাখলেই হবে।
Loading=true হলে Skeleton দেখাবে।
Loading=false হলে আসল Component Render হবে।

পুরো Page-এর Skeleton

এই Package শুধু ছোট Card-এর জন্য নয়।

আপনি চাইলে পুরো Page-এর Skeleton-ও তৈরি করতে পারবেন।

যেমন—SkeletonBoundary (Alternative Way)

আপনি যদি id ব্যবহার করতে না চান তাহলে SkeletonBoundary ব্যবহার করতে পারেন।

import { SkeletonBoundary } from "@shakhawat.dev/skeleton";

<SkeletonBoundary
    id="uid-skeleton-profile-card"
    loading={loading}
>
    <ProfileCard user={user} />
</SkeletonBoundary>

এখানে Component-কে Wrapper-এর মধ্যে রাখলেই হবে।
Loading=true হলে Skeleton দেখাবে।
Loading=false হলে আসল Component Render হবে।

**

Theme Support

**

Light Theme

<AutoSkeleton
    uid="uid-skeleton-profile-card"
    theme="light"
/>

Dark Theme

<AutoSkeleton
    uid="uid-skeleton-profile-card"
    theme="dark"
/>

Custom Color

<AutoSkeleton
    uid="uid-skeleton-profile-card"
    theme={{
        base: "#ECECEC",
        highlight: "#FFFFFF"
    }}
/>

**

Animation

**

Shimmer

<AutoSkeleton
    uid="uid-skeleton-profile-card"
    animation="shimmer"
/>

Pulse

<AutoSkeleton
    uid="uid-skeleton-profile-card"
    animation="pulse"
/>

Animation বন্ধ

<AutoSkeleton
    uid="uid-skeleton-profile-card"
    animation="none"
/>

Global Theme Provider

বারবার Theme Pass না করে পুরো App-এর জন্য Theme Set করতে পারবেন।

import {
    SkeletonThemeProvider
} from "@shakhawat.dev/skeleton";

<SkeletonThemeProvider
    theme="dark"
    animation="shimmer"
>
    <App />
</SkeletonThemeProvider>

নিজের মতো ID Prefix ব্যবহার করুন

Default Prefix হচ্ছে—

uid-skeleton

আপনি চাইলে পরিবর্তন করতে পারবেন।

import {
    configureAutoSkeleton
} from "@shakhawat.dev/skeleton";

configureAutoSkeleton({
    idPrefix: "skel"
});

তাহলে—

<div id="skel-profile-card">

এভাবেও কাজ করবে।

Manual Skeleton Components

কিছু ক্ষেত্রে আপনি চাইলে নিজেও Skeleton Compose করতে পারবেন।

import {
    SkeletonBox,
    SkeletonCircle,
    SkeletonImage,
    SkeletonButton,
    SkeletonText
} from "@shakhawat.dev/skeleton";

যেমন—

<SkeletonCircle size={50} />

<SkeletonText lines={3} />

<SkeletonButton width={120} />

<SkeletonImage
    width="100%"
    height={200}
/>

<SkeletonBox
    width="100%"
    height={40}
/>

**

Package-এর Detection Rules

**

Package নিজে থেকেই Element Type Detect করার চেষ্টা করে।

যেমন—

• Circular Image → Avatar
• Image → Skeleton Image
• Button → Skeleton Button
• SVG → SVG Placeholder
• Text → Multiple Skeleton Lines
• Flex Layout → Flex Layout
• Grid Layout → Grid Layout
• Box → Structural Container

ফলে বেশিরভাগ ক্ষেত্রেই Manual Configuration লাগে না।

**

Performance

**

Package Design করার সময় Performance-কে গুরুত্ব দেওয়া হয়েছে।

Features:

1. Single MutationObserver
2. DOM Cache
3. Session Storage Cache
4. React.memo
5. Recursive Tree Parsing
6. Lightweight Render

ফলে বড় Project-এও Smooth Performance পাওয়া যায়।

**

1. কোন Project-এ ব্যবহার করবেন? **

এই Package বিশেষভাবে উপযোগী—

1. React Projects
2. Next.js Projects
3. Dashboard
4. Admin Panel
5. CRM
6. E-commerce
7. Social Feed
8. Profile Page
9. SaaS Application
10. Portfolio
11. Blog Website

যেখানে বারবার Skeleton Loader লাগে।

**

কেন এই Package?

**

1. Skeleton UI হাতে লিখতে হয় না।
3. Real UI বদলালেই Skeleton নিজে Update হয়ে যায়।
5. একই Component-এর জন্য বারবার Skeleton Maintain করতে হয় না।
7. Design Consistency বজায় থাকে।
9. TypeScript Support রয়েছে।
11. Light এবং Dark Theme Support।
13. Shimmer এবং Pulse Animation।
15. Session Cache থাকায় Loading Experience আরও Smooth হয়।

Future Plan

Package-টি এখনও Active Development-এ রয়েছে।

ভবিষ্যতে আরও কিছু Feature যোগ করার পরিকল্পনা আছে—

1. Better Nested Layout Detection
2. Better SVG Support
3. Virtualized List Optimization
4. More Theme Presets
5. Better Animation Customization
6. DevTools Support
7. Performance Improvements

**

Feedback

**

এই Package সম্পূর্ণ Open Source।

আপনি ব্যবহার করে যদি কোনো Bug, Suggestion অথবা Feature Request পান, অবশ্যই জানাবেন।

আপনার Feedback এই Project-কে আরও ভালো করতে সাহায্য করবে।

Happy Coding ❤️