From 91f0b297e8bdf12c2ee9b59e24e2a0a0fb092b24 Mon Sep 17 00:00:00 2001
From: AaronPatterson1 <aaronpatters@gmail.com>
Date: Sun, 17 Nov 2024 16:57:54 -0500
Subject: [PATCH 1/2] Adding skeleton component

---
 .../components/routes_list_docs_components.ts |   2 +-
 .../src/pages/components/skeleton/index.tsx   | 104 +++++++++++++++++-
 2 files changed, 100 insertions(+), 6 deletions(-)

diff --git a/packages/_site/src/pages/components/routes_list_docs_components.ts b/packages/_site/src/pages/components/routes_list_docs_components.ts
index 205f1f7..b3417c8 100644
--- a/packages/_site/src/pages/components/routes_list_docs_components.ts
+++ b/packages/_site/src/pages/components/routes_list_docs_components.ts
@@ -182,7 +182,7 @@ export const componentsList: I_ComponentsList[] = [
 
   {
     title: "Skeleton",
-    description: "",
+    description: "Used to show a placeholder while content is loading.",
     link: "/components/skeleton/examples",
   },
 
diff --git a/packages/_site/src/pages/components/skeleton/index.tsx b/packages/_site/src/pages/components/skeleton/index.tsx
index 8a00e63..a1e2135 100644
--- a/packages/_site/src/pages/components/skeleton/index.tsx
+++ b/packages/_site/src/pages/components/skeleton/index.tsx
@@ -24,7 +24,7 @@ export default function SkeletonPage() {
         >
             <ComponentHero
                 title="Skeleton"
-                description=""
+                description="Used to show a placeholder while content is loading."
             />
 
             <div {...stylex.props(styles.threeColumnLayout)}>
@@ -37,7 +37,7 @@ export default function SkeletonPage() {
                         <Tabs defaultValue="tab-1">
                             <TabsList>
                                 <TabsTrigger value="tab-1">Automatic</TabsTrigger>
-                                {/* <TabsTrigger value="tab-2">Manual</TabsTrigger> */}
+                                <TabsTrigger value="tab-2">Manual</TabsTrigger>
                             </TabsList>
                             <TabsContent value="tab-1">
                                 <div {...stylex.props(styles.blockWrapper)}>
@@ -67,7 +67,7 @@ export default function SkeletonPage() {
 
                                     <CodeBlock
                                         language="tsx"
-                                        url={"https://raw.githubusercontent.com/clearfeld/control-ui/main/packages/sheet/lib/index.tsx"}
+                                        url={"https://raw.githubusercontent.com/clearfeld/control-ui/main/packages/skeleton/lib/index.tsx"}
                                     />
                                 </div>
                             </TabsContent>
@@ -80,8 +80,8 @@ export default function SkeletonPage() {
                     <div>
                         <div>
                             <ExampleBlock
-                                title="Default"
-                                description=""
+                                title="Card"
+                                description="Display regular rectangle skeleton, placeholder for an image or card."
                             />
                             <div {...stylex.props(styles.codeWrapper)}>
                                 <PreviewBlock>
@@ -91,6 +91,20 @@ export default function SkeletonPage() {
                                             height: "12rem",
                                         }}
                                     />
+                                    <Skeleton
+                                        style={{
+                                            marginTop: "1rem",
+                                            width: "20rem",
+                                            height: "1rem",
+                                        }}
+                                    />
+                                    <Skeleton
+                                        style={{
+                                            marginTop: "1rem",
+                                            width: "16rem",
+                                            height: "1rem",
+                                        }}
+                                    />
 
                                 </PreviewBlock>
 
@@ -108,6 +122,86 @@ export default function SelectExample() {
 				height: "12rem",
 			}}
 		/>
+        <Skeleton
+            style={{
+                marginTop: "1rem",
+                width: "20rem",
+                height: "1rem",
+            }}
+        />
+        <Skeleton
+            style={{
+                marginTop: "1rem",
+                width: "16rem",
+                height: "1rem",
+            }}
+        />
+	);
+}
+`}
+                                />
+                            </div>
+                        </div>
+                        <div>
+                            <ExampleBlock
+                                title="Circle"
+                                description="Display circular skeleton, placeholder profile image or icon."
+                            />
+                            <div {...stylex.props(styles.codeWrapper)}>
+                                <PreviewBlock>
+                                    <Skeleton
+                                        style={{
+                                            width: "4rem",
+                                            height: "4rem",
+                                            borderRadius: "50%",
+                                        }}
+                                    />
+                                    <Skeleton
+                                        style={{
+                                            marginTop: "1rem",
+                                            width: "20rem",
+                                            height: "1rem",
+                                        }}
+                                    />
+                                    <Skeleton
+                                        style={{
+                                            marginTop: "1rem",
+                                            width: "16rem",
+                                            height: "1rem",
+                                        }}
+                                    />
+
+                                </PreviewBlock>
+
+                                <CodeBlock
+                                    language="tsx"
+                                    code={`import React from 'react';
+
+import { Skeleton } from "@controlkit/skeleton";
+
+export default function SelectExample() {
+	return (
+		<Skeleton
+		    style={{
+				width: "4rem",
+				height: "4rem",
+				borderRadius: "50%",
+			}}
+		/>
+        <Skeleton
+            style={{
+                marginTop: "1rem",
+                width: "20rem",
+                height: "1rem",
+            }}
+        />
+        <Skeleton
+            style={{
+                marginTop: "1rem",
+                width: "16rem",
+                height: "1rem",
+            }}
+        />
 	);
 }
 `}

From e2b5b8d3dbaa56c38493e1d5df773ac73355f3e7 Mon Sep 17 00:00:00 2001
From: AaronPatterson1 <aaronpatters@gmail.com>
Date: Mon, 18 Nov 2024 19:52:36 -0500
Subject: [PATCH 2/2] Simplifying skeleton component page.

---
 .../src/pages/components/skeleton/index.tsx   | 99 +------------------
 1 file changed, 2 insertions(+), 97 deletions(-)

diff --git a/packages/_site/src/pages/components/skeleton/index.tsx b/packages/_site/src/pages/components/skeleton/index.tsx
index a1e2135..454a74a 100644
--- a/packages/_site/src/pages/components/skeleton/index.tsx
+++ b/packages/_site/src/pages/components/skeleton/index.tsx
@@ -80,8 +80,8 @@ export default function SkeletonPage() {
                     <div>
                         <div>
                             <ExampleBlock
-                                title="Card"
-                                description="Display regular rectangle skeleton, placeholder for an image or card."
+                                title="Default"
+                                description="Default state of skeleton."
                             />
                             <div {...stylex.props(styles.codeWrapper)}>
                                 <PreviewBlock>
@@ -91,21 +91,6 @@ export default function SkeletonPage() {
                                             height: "12rem",
                                         }}
                                     />
-                                    <Skeleton
-                                        style={{
-                                            marginTop: "1rem",
-                                            width: "20rem",
-                                            height: "1rem",
-                                        }}
-                                    />
-                                    <Skeleton
-                                        style={{
-                                            marginTop: "1rem",
-                                            width: "16rem",
-                                            height: "1rem",
-                                        }}
-                                    />
-
                                 </PreviewBlock>
 
                                 <CodeBlock
@@ -122,86 +107,6 @@ export default function SelectExample() {
 				height: "12rem",
 			}}
 		/>
-        <Skeleton
-            style={{
-                marginTop: "1rem",
-                width: "20rem",
-                height: "1rem",
-            }}
-        />
-        <Skeleton
-            style={{
-                marginTop: "1rem",
-                width: "16rem",
-                height: "1rem",
-            }}
-        />
-	);
-}
-`}
-                                />
-                            </div>
-                        </div>
-                        <div>
-                            <ExampleBlock
-                                title="Circle"
-                                description="Display circular skeleton, placeholder profile image or icon."
-                            />
-                            <div {...stylex.props(styles.codeWrapper)}>
-                                <PreviewBlock>
-                                    <Skeleton
-                                        style={{
-                                            width: "4rem",
-                                            height: "4rem",
-                                            borderRadius: "50%",
-                                        }}
-                                    />
-                                    <Skeleton
-                                        style={{
-                                            marginTop: "1rem",
-                                            width: "20rem",
-                                            height: "1rem",
-                                        }}
-                                    />
-                                    <Skeleton
-                                        style={{
-                                            marginTop: "1rem",
-                                            width: "16rem",
-                                            height: "1rem",
-                                        }}
-                                    />
-
-                                </PreviewBlock>
-
-                                <CodeBlock
-                                    language="tsx"
-                                    code={`import React from 'react';
-
-import { Skeleton } from "@controlkit/skeleton";
-
-export default function SelectExample() {
-	return (
-		<Skeleton
-		    style={{
-				width: "4rem",
-				height: "4rem",
-				borderRadius: "50%",
-			}}
-		/>
-        <Skeleton
-            style={{
-                marginTop: "1rem",
-                width: "20rem",
-                height: "1rem",
-            }}
-        />
-        <Skeleton
-            style={{
-                marginTop: "1rem",
-                width: "16rem",
-                height: "1rem",
-            }}
-        />
 	);
 }
 `}