restore banner

packages/website/src/components/Skeleton/index.module.css

@@ -0,0 +1,25 @@
+@keyframes skeleton-animation {
+  0% {
+    background-color: var(--color-1);
+  }
+  50% {
+    background-color: var(--color-2);
+  }
+  100% {
+    background-color: var(--color-1);
+  }
+}
+
+.skeleton {
+  --color-1: var(--black-a5);
+  --color-2: var(--black-a4);
+
+  :global(:root.dark) & {
+    --color-1: var(--white-a3);
+    --color-2: var(--white-a2);
+  }
+
+  animation: skeleton-animation var(--duration-subtle) ease infinite;
+
+  border-radius: var(--space-2);
+}

packages/website/src/components/Skeleton/index.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+export interface SkeletonProps extends ComponentProps<"div"> {}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return <div className={classNames(styles.skeleton, className)} {...props} />;
+}