From 7a86c94d43a12fe65837d26fafd4cb49c1188d70 Mon Sep 17 00:00:00 2001
From: Kusumitha24 <konkalakusumitha1628@gmail.com>
Date: Sun, 19 Oct 2025 15:48:55 +0530
Subject: [PATCH 1/2] feat: add skeleton loading component

---
 components/Skeleton/Skeleton.css | 14 ++++++++++++++
 components/Skeleton/Skeleton.tsx | 27 +++++++++++++++++++++++++++
 components/Skeleton/index.ts     |  1 +
 3 files changed, 42 insertions(+)
 create mode 100644 components/Skeleton/Skeleton.css
 create mode 100644 components/Skeleton/Skeleton.tsx
 create mode 100644 components/Skeleton/index.ts

diff --git a/components/Skeleton/Skeleton.css b/components/Skeleton/Skeleton.css
new file mode 100644
index 0000000..792e8c9
--- /dev/null
+++ b/components/Skeleton/Skeleton.css
@@ -0,0 +1,14 @@
+.skeleton {
+  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite ease-in-out;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
diff --git a/components/Skeleton/Skeleton.tsx b/components/Skeleton/Skeleton.tsx
new file mode 100644
index 0000000..c70ab04
--- /dev/null
+++ b/components/Skeleton/Skeleton.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import "./Skeleton.css";
+
+interface SkeletonProps {
+  width?: string;
+  height?: string;
+  borderRadius?: string;
+}
+
+const Skeleton: React.FC<SkeletonProps> = ({
+  width = "100%",
+  height = "20px",
+  borderRadius = "8px",
+}) => {
+  return (
+    <div
+      className="skeleton"
+      style={{
+        width,
+        height,
+        borderRadius,
+      }}
+    />
+  );
+};
+
+export default Skeleton;
diff --git a/components/Skeleton/index.ts b/components/Skeleton/index.ts
new file mode 100644
index 0000000..2508b14
--- /dev/null
+++ b/components/Skeleton/index.ts
@@ -0,0 +1 @@
+export { default } from "./Skeleton";

From 881fcc847372538c3c83d9854bf88aeee7499a2e Mon Sep 17 00:00:00 2001
From: Kusumitha24 <konkalakusumitha1628@gmail.com>
Date: Mon, 20 Oct 2025 13:19:59 +0530
Subject: [PATCH 2/2] chore: updated Skeleton component structure to match repo
 standards

---
 components/Skeleton/README.md     | 26 ++++++++++++++++++++++++++
 components/Skeleton/Skeleton.css  | 14 --------------
 components/Skeleton/Skeleton.jsx  | 28 ++++++++++++++++++++++++++++
 components/Skeleton/Skeleton.tsx  | 27 ---------------------------
 components/Skeleton/index.ts      |  1 -
 components/Skeleton/metadata.json | 11 +++++++++++
 6 files changed, 65 insertions(+), 42 deletions(-)
 create mode 100644 components/Skeleton/README.md
 delete mode 100644 components/Skeleton/Skeleton.css
 create mode 100644 components/Skeleton/Skeleton.jsx
 delete mode 100644 components/Skeleton/Skeleton.tsx
 delete mode 100644 components/Skeleton/index.ts
 create mode 100644 components/Skeleton/metadata.json

diff --git a/components/Skeleton/README.md b/components/Skeleton/README.md
new file mode 100644
index 0000000..64d3660
--- /dev/null
+++ b/components/Skeleton/README.md
@@ -0,0 +1,26 @@
+# Skeleton Component
+
+The **Skeleton** component provides a visual placeholder while content is loading.  
+It uses a smooth shimmer animation and customizable dimensions.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|----------|-------------|
+| `width` | `string` | `100%` | Sets the width of the skeleton block |
+| `height` | `string` | `20px` | Sets the height of the skeleton block |
+| `borderRadius` | `string` | `8px` | Rounds the corners of the skeleton |
+
+## Example
+
+```jsx
+import Skeleton from "./Skeleton";
+
+export default function Example() {
+  return (
+    <>
+      <Skeleton width="200px" height="20px" />
+      <Skeleton width="100%" height="40px" borderRadius="12px" />
+    </>
+  );
+}
diff --git a/components/Skeleton/Skeleton.css b/components/Skeleton/Skeleton.css
deleted file mode 100644
index 792e8c9..0000000
--- a/components/Skeleton/Skeleton.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.skeleton {
-  background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite ease-in-out;
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
diff --git a/components/Skeleton/Skeleton.jsx b/components/Skeleton/Skeleton.jsx
new file mode 100644
index 0000000..8949323
--- /dev/null
+++ b/components/Skeleton/Skeleton.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+const Skeleton = ({ width = "100%", height = "20px", borderRadius = "8px" }) => {
+  const style = {
+    width,
+    height,
+    borderRadius,
+    background: "linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%)",
+    backgroundSize: "200% 100%",
+    animation: "skeleton-loading 1.5s infinite ease-in-out",
+  };
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes skeleton-loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+          }
+        `}
+      </style>
+      <div style={style}></div>
+    </>
+  );
+};
+
+export default Skeleton;
diff --git a/components/Skeleton/Skeleton.tsx b/components/Skeleton/Skeleton.tsx
deleted file mode 100644
index c70ab04..0000000
--- a/components/Skeleton/Skeleton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import "./Skeleton.css";
-
-interface SkeletonProps {
-  width?: string;
-  height?: string;
-  borderRadius?: string;
-}
-
-const Skeleton: React.FC<SkeletonProps> = ({
-  width = "100%",
-  height = "20px",
-  borderRadius = "8px",
-}) => {
-  return (
-    <div
-      className="skeleton"
-      style={{
-        width,
-        height,
-        borderRadius,
-      }}
-    />
-  );
-};
-
-export default Skeleton;
diff --git a/components/Skeleton/index.ts b/components/Skeleton/index.ts
deleted file mode 100644
index 2508b14..0000000
--- a/components/Skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Skeleton";
diff --git a/components/Skeleton/metadata.json b/components/Skeleton/metadata.json
new file mode 100644
index 0000000..c453468
--- /dev/null
+++ b/components/Skeleton/metadata.json
@@ -0,0 +1,11 @@
+{
+  "name": "Skeleton",
+  "description": "A loading placeholder component with shimmer animation.",
+  "props": {
+    "width": "string (default: 100%)",
+    "height": "string (default: 20px)",
+    "borderRadius": "string (default: 8px)"
+  },
+  "category": "Feedback",
+  "framework": "React"
+}