Added skeleton component (fixes #162)

components/progress/react/skeleton/README.md

@@ -0,0 +1,43 @@
+# Skeleton
+
+A reusable and lightweight skeleton loader component for React. It visually indicates content is loading by displaying placeholder shapes, improving perceived performance for users while data is being fetched.
+
+**Author:** [@Jainam-not-a-robot](https://github.com/Jainam-not-a-robot)
+
+---
+
+## Features
+
+- Displays placeholder shapes for loading content
+- Works with any layout: cards, lists, tables, etc.
+- Pulse animation to indicate loading state
+- Fully customizable via `className` or `style`
+- Lightweight and dependency-free
+- Compatible with Next.js using `"use client"`
+
+---
+
+## Props
+
+| Prop        | Type                  | Default | Description                                           |
+| :---------- | :------------------- | :------ | :---------------------------------------------------- |
+| `className` | `string`             | `""`    | Additional Tailwind CSS classes to style the skeleton |
+| `style`     | `React.CSSProperties` | `{}`    | Inline styles for the skeleton container (optional)   |
+
+---
+
+## Usage
+
+```jsx
+import { Skeleton } from './Skeleton'
+
+export default function App() {
+  return (
+    <div className="space-y-2 p-4">
+      <Skeleton className="h-4 w-3/4 rounded-md" />
+      <Skeleton className="h-4 w-1/2 rounded-md" />
+      <Skeleton className="h-4 w-4/5 rounded-md" />
+    </div>
+  )
+}
+```

components/progress/react/skeleton/Skeleton.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+function Skeleton({ className = "" }) {
+  return (
+    <div className={`animate-pulse bg-gray-400 rounded-md ${className}`}></div>
+  );
+  //You can give class names as per your requirement, like height and width, also can chnage bg color by your choice
+}
+
+export default function Demo(){
+    return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}

components/progress/react/skeleton/component.json

@@ -0,0 +1,22 @@
+{
+  "name": "Skeleton",
+  "category": "progress",
+  "framework": "react",
+  "tags": ["Loading", "animation", "content-loading", "ui", "cards"],
+  "author": "Jainam-not-a-robot",
+  "license": "MIT",
+  "version": "1.0.0",
+  "preview": "A skeleton loader component that visually indicates content is loading, providing a smoother user experience by displaying placeholder shapes before actual content is rendered.",
+  "props": [
+    {
+      "name": "className",
+      "type": "string",
+      "description": "Additional Tailwind CSS classes to customize the skeleton appearance."
+    },
+    {
+      "name": "style",
+      "type": "React.CSSProperties",
+      "description": "Optional inline styles for the skeleton container."
+    }
+  ]
+}