feat(skeleton): added Skeleton Loading with Examples

Author: dhavalveera

apps/web/content/docs/components/skeleton.mdx

@@ -0,0 +1,76 @@
+---
+title: React Skeleton - Flowbite
+description: The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video
+---
+
+Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, heading, images, videos, and more.
+
+You can set the width and height of these skeleton components based on the size of the content and element that it is being loaded in, such as a card or an article page.
+
+Start using the skeleton component by importing it from the `flowbite-react` library:
+
+```jsx
+import { Skeleton } from "flowbite-react";
+```
+
+# Variants
+
+## Default
+
+Represents a single line of text.
+
+<Example name="skeleton.root" />
+
+## Circular
+
+<Example name="skeleton.circular" />
+
+## Rectangular
+
+<Example name="skeleton.rectangular" />
+
+## Rounded
+
+<Example name="skeleton.rounded" />
+
+# Examples
+
+## Image placeholder
+
+This example can be used to show a placeholder when loading an image and text content.
+
+<Example name="skeleton.image" />
+
+## Video placeholder
+
+Use this example to show a skeleton placeholder when loading video content.
+
+<Example name="skeleton.video" />
+
+## Card placeholder
+
+Use this example to show a placeholder when loading content inside a card.
+
+<Example name="skeleton.card" />
+
+## List placeholder
+
+Use this example to show a placeholder when loading a list of items.
+
+<Example name="skeleton.list" />
+
+## Testimonial placeholder
+
+Use this example to show a placeholder when loading a list of items.
+
+<Example name="skeleton.testimonial" />
+
+# Theme
+
+To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
+
+<Theme name="skeleton" />
+
+# References
+
+- [Flowbite Skeleton](https://flowbite.com/docs/components/skeleton/)

apps/web/data/components.tsx

@@ -140,6 +140,13 @@ export const COMPONENTS_DATA: Component[] = [
     link: "/docs/components/sidebar",
     classes: "w-16",
   },
+  {
+    name: "Skeleton",
+    image: "/images/components/skeleton.svg",
+    imageDark: "/images/components/skeleton-dark.svg",
+    link: "/docs/components/skeleton",
+    classes: "w-48",
+  },
   {
     name: "Pagination",
     image: "/images/components/pagination.svg",

apps/web/data/docs-sidebar.ts

@@ -76,6 +76,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: "Progress bar", href: "/docs/components/progress" },
       { title: "Rating", href: "/docs/components/rating" },
       { title: "Sidebar", href: "/docs/components/sidebar" },
+      { title: "Skeleton", href: "/docs/components/skeleton", isNew: true },
       { title: "Spinner", href: "/docs/components/spinner" },
       { title: "Table", href: "/docs/components/table" },
       { title: "Tabs", href: "/docs/components/tabs" },

apps/web/examples/index.ts

@@ -25,6 +25,7 @@ export * as popover from "./popover";
 export * as progress from "./progress";
 export * as rating from "./rating";
 export * as sidebar from "./sidebar";
+export * as skeleton from "./skeleton";
 export * as spinner from "./spinner";
 export * as table from "./table";
 export * as tabs from "./tabs";

apps/web/examples/skeleton/index.ts

@@ -0,0 +1,9 @@
+export { card } from "./skeleton.card";
+export { circular } from "./skeleton.circular";
+export { image } from "./skeleton.image";
+export { list } from "./skeleton.list";
+export { rectangular } from "./skeleton.rectangular";
+export { rounded } from "./skeleton.rounded";
+export { root } from "./skeleton.root";
+export { testimonial } from "./skeleton.testimonial";
+export { video } from "./skeleton.video";

apps/web/examples/skeleton/skeleton.card.tsx

@@ -0,0 +1,54 @@
+import { SkeletonCard } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+'use client';
+
+import { Skeleton } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <Skeleton.Card />
+    </div>
+  )
+}
+`;
+
+const codeRSC = `
+import { SkeletonCard } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <SkeletonCard />
+    </div>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div>
+      <SkeletonCard />
+    </div>
+  );
+}
+
+export const card: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "skeleton/skeleton.card.tsx",
+  component: <Component />,
+};

apps/web/examples/skeleton/skeleton.circular.tsx

@@ -0,0 +1,54 @@
+import { Skeleton } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+'use client';
+
+import { Skeleton } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <Skeleton variant="circular" />
+    </div>
+  )
+}
+`;
+
+const codeRSC = `
+import { Skeleton } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <Skeleton variant="circular" />
+    </div>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div>
+      <Skeleton variant="circular" />
+    </div>
+  );
+}
+
+export const circular: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "skeleton/skeleton.circular.tsx",
+  component: <Component />,
+};

apps/web/examples/skeleton/skeleton.image.tsx

@@ -0,0 +1,54 @@
+import { SkeletonImage } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+'use client';
+
+import { Skeleton } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <Skeleton.Image />
+    </div>
+  )
+}
+`;
+
+const codeRSC = `
+import { SkeletonImage } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <SkeletonImage />
+    </div>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div>
+      <SkeletonImage />
+    </div>
+  );
+}
+
+export const image: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "skeleton/skeleton.image.tsx",
+  component: <Component />,
+};

apps/web/examples/skeleton/skeleton.list.tsx

@@ -0,0 +1,54 @@
+import { SkeletonList } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+'use client';
+
+import { Skeleton } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <Skeleton.List />
+    </div>
+  )
+}
+`;
+
+const codeRSC = `
+import { SkeletonList } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <SkeletonList />
+    </div>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div>
+      <SkeletonList />
+    </div>
+  );
+}
+
+export const list: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "skeleton/skeleton.list.tsx",
+  component: <Component />,
+};

apps/web/examples/skeleton/skeleton.rectangular.tsx

@@ -0,0 +1,54 @@
+import { Skeleton } from "flowbite-react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+'use client';
+
+import { Skeleton } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <Skeleton variant="rectangular" />
+    </div>
+  )
+}
+`;
+
+const codeRSC = `
+import { Skeleton } from "flowbite-react";
+
+function Component() {
+  return (
+    <div>
+      <Skeleton variant="rectangular" />
+    </div>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div>
+      <Skeleton variant="rectangular" />
+    </div>
+  );
+}
+
+export const rectangular: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "skeleton/skeleton.rectangular.tsx",
+  component: <Component />,
+};