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 ( {user.name} {user.bio} Follow ); } Enter fullscreen mode Exit fullscreen mode শুধু একটি id যোগ করলেন। এখন Loading State-এ লিখুন— import { AutoSkeleton } from "@shakhawat.dev/skeleton"; function Loader({ loading, user }) { if (loading) { return ( ); } return ; } Enter fullscreen mode Exit fullscreen mode ব্যস - কোন Skeleton Design করতে হবে না। Package নিজেই Profile Card-এর মতো Skeleton Generate করবে। AutoSkeleton কীভাবে কাজ করে? প্রথমবার Component Render হওয়ার পর Package— DOM Scan করে Element Measure করে Structure Parse করে Skeleton Tree তৈরি করে Memory এবং Session Storage-এ Cache করে রাখে এরপর যখনই আপনি একই uid ব্যবহার করবেন— Enter fullscreen mode Exit fullscreen mode Package সঙ্গে সঙ্গে Cached Skeleton Render করবে। অর্থাৎ প্রতিবার নতুন করে Measure করারও দরকার হবে না। SkeletonBoundary (Alternative Way) আপনি যদি id ব্যবহার করতে না চান তাহলে SkeletonBoundary ব্যবহার করতে পারেন। import { SkeletonBoundary } from "@shakhawat.dev/skeleton"; Enter fullscreen mode Exit fullscreen mode এখানে 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"; Enter fullscreen mode Exit fullscreen mode এখানে Component-কে Wrapper-এর মধ্যে রাখলেই হবে। Loading=true হলে Skeleton দেখাবে। Loading=false হলে আসল Component Render হবে। ** Theme Support ** Light Theme Enter fullscreen mode Exit fullscreen mode Dark Theme Enter fullscreen mode Exit fullscreen mode Custom Color Enter fullscreen mode Exit fullscreen mode ** Animation ** Shimmer Enter fullscreen mode Exit fullscreen mode Pulse Enter fullscreen mode Exit fullscreen mode Animation বন্ধ Enter fullscreen mode Exit fullscreen mode Global Theme Provider বারবার Theme Pass না করে পুরো App-এর জন্য Theme Set করতে পারবেন। import { SkeletonThemeProvider } from "@shakhawat.dev/skeleton"; Enter fullscreen mode Exit fullscreen mode নিজের মতো ID Prefix ব্যবহার করুন Default Prefix হচ্ছে— uid-skeleton আপনি চাইলে পরিবর্তন করতে পারবেন। import { configureAutoSkeleton } from "@shakhawat.dev/skeleton"; configureAutoSkeleton({ idPrefix: "skel" }); Enter fullscreen mode Exit fullscreen mode তাহলে— Enter fullscreen mode Exit fullscreen mode এভাবেও কাজ করবে। Manual Skeleton Components কিছু ক্ষেত্রে আপনি চাইলে নিজেও Skeleton Compose করতে পারবেন। import { SkeletonBox, SkeletonCircle, SkeletonImage, SkeletonButton, SkeletonText } from "@shakhawat.dev/skeleton"; Enter fullscreen mode Exit fullscreen mode যেমন— Enter fullscreen mode Exit fullscreen mode ** 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: Single MutationObserver DOM Cache Session Storage Cache React.memo Recursive Tree Parsing Lightweight Render ফলে বড় Project-এও Smooth Performance পাওয়া যায়। ** কোন Project-এ ব্যবহার করবেন? ** এই Package বিশেষভাবে উপযোগী— React Projects Next.js Projects Dashboard Admin Panel CRM E-commerce Social Feed Profile Page SaaS Application Portfolio Blog Website যেখানে বারবার Skeleton Loader লাগে। ** কেন এই Package? ** Skeleton UI হাতে লিখতে হয় না। Real UI বদলালেই Skeleton নিজে Update হয়ে যায়। একই Component-এর জন্য বারবার Skeleton Maintain করতে হয় না। Design Consistency বজায় থাকে। TypeScript Support রয়েছে। Light এবং Dark Theme Support। Shimmer এবং Pulse Animation। Session Cache থাকায় Loading Experience আরও Smooth হয়। Future Plan Package-টি এখনও Active Development-এ রয়েছে। ভবিষ্যতে আরও কিছু Feature যোগ করার পরিকল্পনা আছে— Better Nested Layout Detection Better SVG Support Virtualized List Optimization More Theme Presets Better Animation Customization DevTools Support Performance Improvements ** Feedback ** এই Package সম্পূর্ণ Open Source। আপনি ব্যবহার করে যদি কোনো Bug, Suggestion অথবা Feature Request পান, অবশ্যই জানাবেন। আপনার Feedback এই Project-কে আরও ভালো করতে সাহায্য করবে। Happy Coding ❤️