Merge pull request #51 from deepumandal/30-skeleton

 feat: skeleton

src/App.tsx

@@ -16,6 +16,7 @@ import {
   ContextMenu,
   Tooltip,
   HoverCard,
+  Skeleton,
 } from "@Components/ui";
 
 const App = () => (
@@ -187,6 +188,14 @@ const App = () => (
     <Flex asElement="section" className="w-full">
       <HoverCardDemo />
     </Flex>
+
+    <Flex asElement="section" className="w-full space-x-2" alignItems="center">
+      <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>
+    </Flex>
   </Container>
 );
 

src/components/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@Utils/className";
+
+const Skeleton = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("animate-pulse rounded-md bg-muted-light/20", className)}
+    {...props}
+  />
+);
+
+export { Skeleton };

src/components/ui/Skeleton/index.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

src/components/ui/index.ts

@@ -14,3 +14,4 @@ export { Checkbox } from "./CheckBox";
 export { ContextMenu } from "./ContextMenu";
 export { Tooltip } from "./ToolTip";
 export { HoverCard } from "./HoverCard";
+export { Skeleton } from "./Skeleton";